详细介绍CSS3中animation-direction属性-tutorial css-php.cn

详细介绍CSS3中animation-direction属性

零下一度

Lepaskan： 2017-05-18 14:34:43

asal

2926 orang telah melayarinya

CSS3 animation-direction 属性，CSS 参考手册实例先执行一遍动画，然后再反向执行一遍动画。检索或设置对象动画在循环中是否反向运动

实例

先执行一遍动画，然后再反向执行一遍动画：

!DOCTYPE html> <html> <head> <style>
p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; 

/* Safari 和 Chrome */ -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 /* Safari 和 Chrome */ { 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> <p></p> </body> </html>

Salin selepas log masuk

浏览器支持

Internet Explorer 10、Firefox 和 Opera 支持 animation-direction 属性。

Safari 和 Chrome 支持另一个可替代该属性的属性，即 -webkit-animation-direction 属性。

注意：Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。

定义和用法

animation-direction 属性定义是否循环交替反向播放动画。

注意：如果动画被设置为只播放一次，该属性将不起作用。

CSS 语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe

Salin selepas log masuk

【相关推荐】

1. 分享一个监听css3动画（animation）结束事件实例

2. 必须掌握的CSS3动画（Animation）的8大属性

3. 利用animation属性实现循环间的延时执行实例教程

4. 详解css3中两种暂停方式（transition、animation）

Atas ialah kandungan terperinci 详细介绍CSS3中animation-direction属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!