如何使CSS动画在完成后不反转？里面

例如我现在有被旋转和缩放使用关键帧的图片，但我的问题是，每次迭代后，反向旋转方向。如何阻止这种情况发生，以便旋转在一个方向上平滑？ JSFiddle。查看完整的网页HTML浏览：这里如何使CSS动画在完成后不反转？里面

<html class="fourzerofour"> 
<head> 
    <!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: --> 
    <meta charset="UTF-8"> 
    <title>Egrodo | 404</title> 
    <link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" /> 
    <link rel="stylesheet" type="text/css" href="../CSS/materialize.css" /> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'> 
    <link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ > 
</head> 

<body class="fourzerofour"> 
    <section class="fourzerofour"> 
    <p class="fourzerofour"> 
     404 - What have you done?!? 
    </p> 
    <img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png"> 
    </section> 
</body> 

</html>

和我的整个页面的CSS：

body { 
    font-family: 'Raleway', sans-serif; 
} 
p.fourzerofour { 
    font-size: 2.4em; 
    color: white; 
    display: block; 
    margin-top: -2em; 
    margin-bottom: 2em; 
} 

body.fourzerofour { 
    height: 100%; 
    background-color: darkgrey; 
} 
section.fourzerofour { 
    position: relative; 
    height: 100%; 
    text-align: center; 
    margin-top: 23%; 

} 

.rotating { 
    -webkit-animation: rotating 3s linear infinite; 
    -moz-animation: rotating 3s linear infinite; 
    -ms-animation: rotating 3s linear infinite; 
    -o-animation: rotating 3s linear infinite; 
    animation: rotating 3s linear infinite; 
    animation-direction: alternate; 
    width: 10em; 
} 

p.fourzerofour + .rotating:active { 
    -webkit-filter: invert(1); 
} 

@-webkit-keyframes rotating /* Safari and Chrome */ { 
    0% { 
    -ms-transform: rotate(0deg) scale(.1); 
    -moz-transform: rotate(0deg) scale(.1); 
    -webkit-transform: rotate(0deg) scale(.1); 
    -o-transform: rotate(0deg) scale(.1); 
    transform: rotate(0deg) scale(.1); 
    } 
    50% { 
    -ms-transform: rotate(360deg) scale(1); 
    -moz-transform: rotate(360deg) scale(1); 
    -webkit-transform: rotate(360deg) scale(1); 
    -o-transform: rotate(360deg) scale(1); 
    transform: rotate(360deg) scale(1): 
    } 
    100% { 
    -ms-transform: rotate(0deg) scale(.1); 
    -moz-transform: rotate(0deg) scale(.1); 
    -webkit-transform: rotate(0deg) scale(.1); 
    -o-transform: rotate(0deg) scale(.1); 
    transform: rotate(0deg) scale(.1); 
    } 
} 

@keyframes rotating { 
    0% { 
    -ms-transform: rotate(0deg) scale(.1); 
    -moz-transform: rotate(0deg) scale(.1); 
    -webkit-transform: rotate(0deg) scale(.1); 
    -o-transform: rotate(0deg) scale(.1); 
    transform: rotate(0deg) scale(.1); 
    } 
    50% { 
    -ms-transform: rotate(360deg) scale(1); 
    -moz-transform: rotate(360deg) scale(1); 
    -webkit-transform: rotate(360deg) sscale(1); 
    -o-transform: rotate(360deg) scale(1); 
    transform: rotate(360deg) scale(1); 
    } 
    100% { 
    -ms-transform: rotate(0deg) scale(.1); 
    -moz-transform: rotate(0deg) scale(.1); 
    -webkit-transform: rotate(0deg) scale(.1); 
    -o-transform: rotate(0deg) scale(.1); 
    transform: rotate(0deg) scale(.1); 
    } 
}

来源

2015-09-09 egrodo

如果您删除animation-direction:alternate应该罚款;

fiddle

而且我调整了小提琴

来源

2015-09-09 10:48:29 maioman

通过golly你做到了！我知道删除动画的方向，但不知道，因为它没有让它循环，但你做的旋转调整正是我所寻找的！我会标记为答案，但我不完全确定为什么它工作..为什么添加720deg使它工作？抱歉，CSS动画非常新。再次感谢！ – egrodo

@egrodo这是因为动画以720deg结尾，并从0开始;因为图像的位置是相同的720deg和0度重新启动动画720deg的窍门 – maioman

哦，他们呢？这很奇怪。所以他们从720/0开始，在720/0结束，得到它。这是有道理的，我只是不明白为什么它是720deg而不是360？谢谢！ – egrodo

它animation: rotating 3s linear infinite，其中infinite是transition-duration这里rotating就是为什么它不断重复其animation的transition即删除这将为你做的伎俩。

这里JSFiddle。

来源

2015-09-09 10:38:58

链接到外部资源都还可以旋转，但*包括** **充分回答这里*，包括一个解释。 –

摆脱infinite线并取出50％的关键帧样式，以及这是动画的中间。反而给100％最终的动画样式你想：JS Fiddle

追加infinite对动画将不断循环。

.rotating { 
    -webkit-animation: rotating 3s linear; 
    -moz-animation: rotating 3s linear; 
    -ms-animation: rotating 3s linear; 
    -o-animation: rotating 3s linear; 
    animation: rotating 3s linear; 
    animation-direction: alternate; 
    width: 10em; 

} 

p.fourzerofour + .rotating:active { 
     -webkit-filter: invert(1); 

} 

@-webkit-keyframes rotating /* Safari and Chrome */ { 
    0% { 
    -ms-transform: rotate(0deg) scale(.1); 
    -moz-transform: rotate(0deg) scale(.1); 
    -webkit-transform: rotate(0deg) scale(.1); 
    -o-transform: rotate(0deg) scale(.1); 
    transform: rotate(0deg) scale(.1); 
    } 
    100% { 
    -ms-transform: rotate(360deg) scale(1); 
    -moz-transform: rotate(360deg) scale(1); 
    -webkit-transform: rotate(360deg) scale(1); 
    -o-transform: rotate(360deg) scale(1); 
    transform: rotate(360deg) scale(1): 
    } 

} 

@keyframes rotating { 
    0% { 
    -ms-transform: rotate(0deg) scale(.1); 
    -moz-transform: rotate(0deg) scale(.1); 
    -webkit-transform: rotate(0deg) scale(.1); 
    -o-transform: rotate(0deg) scale(.1); 
    transform: rotate(0deg) scale(.1); 
    } 
    100% { 
    -ms-transform: rotate(360deg) scale(1); 
    -moz-transform: rotate(360deg) scale(1); 
    -webkit-transform: rotate(360deg) sscale(1); 
    -o-transform: rotate(360deg) scale(1); 
    transform: rotate(360deg) scale(1); 
    } 

}

如果我误解了预期的效果，你想让它不断循环在一个方向，看到@maioman答案

来源

2015-09-09 10:46:02

感谢您的时间，但是，@maioman创造了理想的效果。 +1 – egrodo

如何使CSS动画在完成后不反转？里面

回答

相关问题