CSS3 实现图片翻转动画效果

@-webkit-keyframes navSelecterBtnUp {
from { -webkit-transform: rotate(0deg); }
to   { -webkit-transform: rotate(-180deg); }
}

@-webkit-keyframes navSelecterBtnDown {
from { -webkit-transform: rotate(-180deg); }
to   { -webkit-transform: rotate(0deg); }
}

.navselecter-btn img {
margin: 0.9em 0.5em;
width: 18px;
height: 12px;
}

.navselecter-btn img.up {
-webkit-animation: navSelecterBtnUp 0.3s;
-webkit-transform: rotate(-180deg);
}

.navselecter-btn img.down {
-webkit-animation: navSelecterBtnDown 0.3s;
-webkit-transform: rotate(0deg);
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注