我正在尝试在CSS(webkit专门)中的一个形状的简单变换。
动画按预期运行，但完成后，div将恢复到初始状态。
有什么办法让它保持在最后状态吗？
动画按预期运行，但完成后，div将恢复到初始状态。
有什么办法让它保持在最后状态吗？
到目前为止，我的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;
}
解决方法
哦，这很简单，只需将所有的CSS规则设置为整理结果。
Example
Example
