到目前为止,这里有我的CSS:
@-webkit-keyframes rotate-good {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-90deg);
}
}
@-webkit-keyframes rotate-bad {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(90deg);
}
}
#good-arrow
{
-webkit-animation-name: rotate-good;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
}
#bad-arrow
{
-webkit-animation-name: rotate-bad;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
}
-webkit-animation-fill-mode:转发;
保留最终的关键帧状态。
更新:完整的跨浏览器
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
由于某些原因,上面的Madara Uchiha所做的评论并非总是可能的:想象一下,而不是立即开始动画(animation-delay:0s),您需要10秒钟的延迟才能开始。如果是这样,您将看到动画元素的最终状态10秒钟,然后动画将其从de 0关键帧过渡到100关键帧,但始终会看到10秒钟的结束状态。