正常状态
动画状态
最后动画执行完又变回正常状态
animation-duration: 3s;
animation-name:listAnimation;
animation-fill-mode: both;
-webkit-animation-duration: 3s;
-webkit-animation-name:listAnimation;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 3s;
-moz-animation-name:listAnimation;
-moz-animation-fill-mode: both;
-o-animation-duration: 3s;-o-animation-name:listAnimation;-o-animation-fill-mode: both;
animation-fill-mode: both;
@-webkit-keyframes listAnimation {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-moz-transform: perspective(400px) rotateY(90deg);
-o-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
-moz-transform: perspective(400px) rotateY(-10deg);
-o-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
-o-transform: perspective(400px) rotateY(10deg);
-moz-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-moz-transform: perspective(400px) rotateY(0deg);
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
试过强制在keyframe里指定font-weight吗?