Rumah >hujung hadapan web >tutorial css >详细介绍CSS3中animation-direction属性
详细介绍CSS3中animation-direction属性
- 零下一度asal
- 2017-05-18 14:34:432830semak imbas
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>浏览器支持
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
【相关推荐】
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!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：必须掌握的CSS3动画（Animation）的8大属性Artikel seterusnya：分享一个监听css3动画（animation）结束事件实例