Sometimes when I get used to the conventional navigation bar, I suddenly want to make my navigation bar look cool and different. Let's see.

The function of this article is that when you click the small icon of the navigation bar, the navigation bar will rotate in the center of the page, and when you click to retract the navigation bar, the navigation bar will rotate in the center of the page. Wave your fingers and don't take away a cloud~

This rotation is suitable for the round navigation bar~

css:

@keyframes tab {
	0%{
		transformtransform: scale(0.2,0.2) rotate(-360deg);/*Elements scale 0.2 at the same time, rotate - 360 degrees*/
		-webkit-transform: scale(0.2,0.2) rotate(-360deg);
		transform-origin:50% 50%;/*Define the rotation center point of the animation*/
	}
	50%{
		transform: scale(0.5,0.5) rotate(-180deg);
		-webkit-transform: scale(0.5,0.5) rotate(-180deg);
		transform-origin:50% 50%;/*Define the rotation center point of the animation*/
	}
	100%{
		transform: scale(1,1) rotate(0deg);
		-webkit-transform: scale(1,1) rotate(0deg);
		transform-origin:50% 50%;/*Define the rotation center point of the animation*/
	}
}
@keyframes tab1 {
	0%{
		transform: scale(1,1) rotate(0deg);/*Elements scale 1 at the same time, rotate 0 degrees*/
		-webkit-transform: scale(1,1) rotate(0deg);
		transform-origin:50% 50%;/*Define the rotation center point of the animation*/
	}
	50%{
		transform: scale(0.5,0.5) rotate(-180deg);
		-webkit-transform: scale(0.5,0.5) rotate(-180deg);
		transform-origin:50% 50%;/*Define the rotation center point of the animation*/
	}
	100%{
		transformtransform: scale(0.2,0.2) rotate(-360deg);
		-webkit-transform: scale(0.2,0.2) rotate(-360deg);
		transform-origin:50% 50%;/*Define the rotation center point of the animation*/
	}
}
.tab-ra{
	position: relative;
	width: 3rem;
	height: 3rem;
	z-index: 999;
	position: relative;
	top: 1rem;
	left: 0;
    right:0;
    margin:0 auto;
	animation: tab 0.3s linear;
	-webkit-animation: tab 0.3s  linear;
}

js:

$('.tab').click(function() {
		$('.tab').hide();//Page prompt click navigation bar icon to hide
        audio1.play();
        $('.tab-big').show();
        $('.tab-ra').css("-webkit-animation","tab 0.3s  linear");//Using tab to create css3 animation

	});

	$('.tab-scale').click(function() {
        setTimeout(function () {
            $('.tab-ra').css("-webkit-animation","tab1 0.3s  linear");//Using tab to retrieve css3 animation
        },300)
        var t = setTimeout(function(){
            $('.tab-big').hide();
        }, 550);
        $('.tab').show();
	});

In fact, the css3 animation works well, and any kind of animation navigation bar can be made