本文摘自PHP中文网,作者藏色散人,侵删。
css animation-direction属性是用来定义是否应该轮流反向播放动画的;当动画播放次数超过一次时,我们就可以通过设置animation-direction的值为alternate来实现动画轮流反向播放。css animation-direction属性怎么用?
animation-direction属性是用来定义是否应该轮流反向播放动画的;当动画播放次数超过一次时,我们就可以通过设置animation-direction的值为alternate来实现动画轮流反向播放。
作用:定义是否应该轮流反向播放动画。
语法:
1 | animation-direction: normal|alternate;
|
说明:normal 默认值。动画应该正常播放。alternate 动画应该轮流反向播放。
注释:如果把动画设置为只播放一次,则该属性没有效果。
css animation-direction属性使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p>
<div></div>
</body>
</html>
|
效果输出:
以上就是css animation-direction属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何设置输入框不可编辑
css backface-visibility属性怎么用
first-child的作用是什么
详解css contain新特性如何控制页面重绘与重排
怎么在css中改变光标样式
css怎么实现禁止点击
css ul 不换行怎么实现
css如何设置行间距和字间距
css中鼠标点击的五种状态分别是什么
css中id和class选择器怎么使用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css animation-direction属性怎么用