介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; style>
div
{
宽度:100 px;
身高:100 px;
背景:红色;
位置:相对;
动画:mymove 5 s无限;
animation-delay: 2 s;/* Safari和Chrome */-webkit-animation: mymove 5 s无限;
-webkit-animation-delay: 2 s;
}
@keyframes mymove
{
从{左:0 px;}
{左:200 px;}
}
@-webkit-keyframes mymove/* Safari和Chrome */{
从{左:0 px;}
{左:200 px;}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div> & lt;/div>
& lt;/body>
& lt;/html>
这篇文章给大家分享的是有关animation-delay属性如何使用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
animation-delay属性是用来定义动画何时开始,以秒或毫秒为单位;使用animation-delay属性可以自定义动画的延迟效果。
<强>作用: animation-delay属性定义动画何时开始.animation-delay值以秒或毫秒计。
<强>语法:
animation-delay:时间;
时间:可省略,默认值是0;用来定义动画开始前等待的时间,以秒或毫秒计。
<强>说明:时间允许为负值,2 s使动画马上开始,但跳过2秒进入动画。
<强>注: Internet Explorer 9以及更早的版本不支持animation-delay属性。
效果图:
感谢各位的阅读!关于animation-delay属性如何使用就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
