52. CSS3 animation-direction属性设置动画播放方向
animation-direction
属性主要用来设置动画播放方向。
语法规则:
animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值:normal、alternate
normal
:是默认值,如果设置为normal时,动画的每次循环都是向前播放;alternate
:作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
例如:通过animation-direction
属性,将move动画播放动画方向设置为alternate
,代码为:
animation-direction:alternate;
注意:Chrome或Safari浏览器,需要加入-webkit-
前缀!
实例演示
将动画move播放方向设置为alternate。
HTML代码:
<div><span></span></div>
CSS代码:
@keyframes move { 0%{ transform: translateY(90px); } 15%{ transform: translate(90px,90px); } 30%{ transform: translate(180px,90px); } 45%{ transform: translate(90px,90px); } 60%{ transform: translate(90px,0); } 75%{ transform: translate(90px,90px); } 90%{ transform: translate(90px,180px); } 100%{ transform: translate(90px,90px); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } span { display: inline-block; width: 20px; height: 20px; background: orange; transform: translateY(90px); animation-name: move; animation-duration: 10s; animation-timing-function: ease-in; animation-delay: .2s; animation-iteration-count:infinite; animation-direction:alternate; }
效果如下:
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 52. CSS3 animation-direction属性设置动画播放方向
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 52. CSS3 animation-direction属性设置动画播放方向