我正在尝试创建一个CSS动画,当用户点击汉堡菜单时,它会变成X(第一步),然后当用户再次点击时,它会动画回到汉堡菜单状态(第二步)。
第一步已经可行,但我不知道如何反转动画。谢谢你的帮助! http://jsfiddle.net/aX6Cf/ HTML
第一步已经可行,但我不知道如何反转动画。谢谢你的帮助! http://jsfiddle.net/aX6Cf/ HTML
<a id="mobile-menu">
<span></span>
</a>
CSS
@-webkit-keyframes rotate-plus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(45deg);
}
}
@-webkit-keyframes rotate-minus {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(-45deg);
}
}
@-webkit-keyframes transition-1 {
from {
top: -6;
transition: all .2s ease-out;
}
to {
top: 0;
transition: all .2s ease-out;
}
}
@-webkit-keyframes transition-2 {
from {
bottom: -6;
transition: all .2s ease-out;
}
to {
bottom: 0;
transition: all .2s ease-out;
}
}
body {
margin: 20px;
}
#mobile-menu {
display: block;
position: relative;
cursor: pointer;
width: 30px;
padding: 6px 30px 9px 0;
box-sizing: border-box;
}
#mobile-menu span,
#mobile-menu span:before,
#mobile-menu span:after {
height: 3px;
width: 30px;
background: #000;
display: block;
content: "";
position: absolute;
left: 50%;
margin-left: -15px;
}
#mobile-menu span:before {
top: -6px;
}
#mobile-menu span:after {
bottom: -6px;
}
#mobile-menu.active span {
background-color: transparent;
}
#mobile-menu.active span:before {
-webkit-animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
animation: rotate-plus .05s ease-out .1s forwards,
transition-1 .05s ease-out forwards;
}
#mobile-menu.active span:after {
-webkit-animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
animation: rotate-minus .05s ease-out .1s forwards,
transition-2 .05s ease-out forwards;
}
jQuery
$("#mobile-menu").click(function(){
$("#mobile-menu").toggleClass("active");
});