CSS 3停止旋转动画页面加载后N秒后

Question

我对css3没有太多的了解，并且我得到了使代码无限旋转的代码片段。

.spin { 
    -webkit-animation: rotation 0.4s linear infinite; 
    animation: rotation 0.4s linear infinite; 
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 
    transform: translateX(100%) translateY(-100%) rotate(45deg); 
} 

@-webkit-keyframes rotation { 
    0%  { -webkit-transform: rotate(0deg); } 
    50%  { -webkit-transform: rotate(-180deg); } 
    100% { -webkit-transform: rotate(-360deg); } 
} 

@keyframes rotation { 
    0%  { transform: rotate(0deg); } 
    50%  { transform: rotate(-180deg); } 
    100% { transform: rotate(-360deg); } 
} 

我想在几秒钟后停止旋转，但我不知道要改变什么。我试图改变infinite到3但它停下来，把我的DIV别的地方。我需要一个平稳的停止并保留div的原始位置。

Answer 1

看到这里jsfiddle

元素是移动的，因为translate

代码：

.spin { 
height:50px; 
width:50px; 
background:red; 
-webkit-animation: rotation 0.4s linear 3; 
animation: rotation 0.4s linear 3; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
} 

你应该知道，infinite是animation-iteration-count财产指定的值应该播放动画的次数。所以不是秒。

，如果你想停止后N秒使用animation-duration，我建议你把动画声明成零件，像这样：

jsfiddle

为前你想要的旋转旋转2秒，如果您将animation-duration设置为2秒，则整个动画需要2秒才能完成，而这不是您想要的。您希望您的spin到2秒的快速旋转，所以你需要计算animation-iteration-count这样2秒/动画持续时间

说你要在0.5秒内完成1圈，你设置animation-duration:0.5s然后animation-iteration-count至2秒/0.5 = 4

代码：

spin { 
    height:50px; 
    width:50px; 
    background:red; 

    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    animation-name:rotation; 
    animation-delay:0s; 
    animation-duration:0.5s; 
    animation-iteration-count:4; 
    animation-fill-mode:backwards; 
} 

有关动画的更多信息，在这里读到：CSS3 animation Property