"When you want to use social media buttons, you use animation to multiply the attractiveness of these buttons, as in the following code, where there is initially a circular button with a hamburger menu icon, when we click on this icon, this icon It rotates and its icon becomes a close icon, and the social media buttons are formed in a semicircle below it. This animation is especially useful in View Mobile, which has a small space."


HTML
<!-- this script got from www.devanswer.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="wrapper"> <div id="hammy" class="hamburger"> <div id="bubble1" class="bubble"> <a> <i class="fa fa-facebook fa-4x"></i> </a> </div> <div id="bubble2" class="bubble"> <a> <i class="fa fa-twitter fa-4x"></i> </a> </div> <div id="bubble3" class="bubble"> <a> <i class="fa fa-google-plus fa-4x"></i> </a> </div> <div id="bubble4" class="bubble"> <a> <i class="fa fa-codepen fa-4x"></i> </a> </div> <div id="cont" class="cont"> <div class="line" id="line1"> </div> <div class="line" id="line2"> </div> <div class="line" id="line3"> </div> </div> </div> <div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a>

CSS
body {
background: linear-gradient( 45deg, #d7e201, #ff01017a);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.wrapper {
width: 100%;
}

.wrapper .hamburger {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 50px auto;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.wrapper .cont {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #3BB878;
}

.wrapper .line {
    width: 75px;
    height: 10px;
    border-radius: 5px;
    background: #464646;
    margin: 10px auto;
    z-index: 2;
    position: relative;
    transition: all 0.4s linear 0.2s !important;
    top: 22px;
}

.wrapper .spin {
    animation: spin 0.5s ease-in-out;
}

.wrapper .unspin {
    animation: spin 0.5s ease-in-out;
    animation-direction: reverse;
}

.wrapper #bubble1, .wrapper #bubble2, .wrapper #bubble3, .wrapper #bubble4 {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    opacity: 1;
    position: absolute;
    left: 5px;
    transition: all 0.2s ease 0s;
    border-radius: 50%;
    line-height: 120px;
}

.wrapper #bubble1 {
    top: 16px;
}

.wrapper #bubble2 {
    top: 16px;
}

.wrapper #bubble3 {
    top: 16px;
}

.wrapper #bubble4 {
    top: 16px;
}

.out1, .out2, .out3, .out4 {
color: #fff !important;
transition: all 0.4s linear 0.1s !important;
}

.out1 {
left: 125px !important;
top: 40px !important;
background: #3B5998;
}

.out2 {
left: 55px !important;
top: 120px !important;
background: #55acee;
}

.out3 {
left: -45px !important;
top: 120px !important;
background: #dd4b39;
}

.out4 {
left: -115px !important;
top: 40px !important;
background: #4d4d4d;
line-height: 110px !important;
}

.cross1, .cross3 {
background: #fff !important;
}

.cross2 {
opacity: 0 !important;
}

.cross1 {
top: 42px !important;
transform: rotate(45deg);
}

.cross3 {
top: 2px !important;
transform: rotate(-45deg);
}

@keyframes spin {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}
}
Javascript
var hammy = $("#hammy");
var bub1 = $("#bubble1");
var bub2 = $("#bubble2");
var bub3 = $("#bubble3");
var bub4 = $("#bubble4");
var spun = false;
$('#cont').click(function () {
        if (spun == false) {
                spin();
        } else {
                unspin();
        }
});

$('#cont').focus(function () {
        if (spun == false) {
                spin();
        } else {
                unspin();
        }
});

var spin = function () {
        spun = true;
        $(hammy).removeClass("unspin").addClass("spin");
        bubblesout();
        makecross();
        setTimeout(function () {
                $(hammy).removeClass("spin");
        }, 500);

}
var unspin = function () {
        spun = false;
        $(hammy).removeClass("spin").addClass("unspin");
        bubblesin();
        destroycross();
        setTimeout(function () {
                $(hammy).removeClass("unspin");
        }, 500);
}

var bubblesout = function () {
        var i = 1;
        $(".bubble").each(function () {
                $(this).addClass("out" + i);
                i++;
        });
}
var bubblesin = function () {
        var i = 1;
        $(".bubble").each(function () {
                $(this).removeClass("out" + i);
                i++;
        });
}

var makecross = function () {
        var i = 1;
        $(".line").each(function () {
                $(this).addClass("cross" + i);
                i++;
        });
}
var destroycross = function () {
        var i = 1;
        $(".line").each(function () {
                $(this).removeClass("cross" + i);
                i++;
        })
}