您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 animation-delay

2018-9-6 00:17| 作者: admin| 查看: 789| 评论: 0|来自: 蚂蚁部落

animation-delay属性设置animation动画开始播放的延迟时间。

更多关于animation动画可以参阅CSS3 animation一章节。

语法结构:

[CSS] 纯文本查看 复制代码
animation-delay:<time> [ , <time> ]*

参数解析:

time:规定动画开始播放的延迟时间,单位为秒(s);可以是负数,使动画跳过指定的时间。

特别说明:如果提供多个属性值,以逗号进行分隔。 

浏览器支持:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).safria浏览器支持此属性。

(6).opera浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>蚂蚁部落</title>   
<style type="text/css">   
div{  
  width:100px;  
  height:100px;  
  background:red;  
  position:relative;  
       
  animation:theanimation 5s infinite;    
  animation-delay:2s; 
}  
@keyframes theanimation{  
  0% {left:0px;}  
  100% {left:200px;}  
}    
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上代码可以设置动画延迟两秒后再开始执行。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>蚂蚁部落</title>    
<style type="text/css">    
div{   
  width:100px;   
  height:100px;   
  background:red;   
  position:relative;   
         
  animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate;   
  animation-delay:2s,5s;

}  
@keyframes ant-1{   
  0% {left:0px;}   
  100% {left:200px;}   
}   
@keyframes ant-2{   
  0% {top:0px;}   
  100% {top:200px;}   
}       
</style>   
</head>   
<body>   
<div></div>   
</body>   
</html>

以上代码可以分别设置动画延迟2秒和5秒后开始执行。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div{
  width: 100px;
  height: 100px;
  position: absolute;
}
.a{
  background-color: blue;
  top: 250px;
  animation: move 4s;
}
.b{
  background-color: green;
  top: 350px;
  animation: move 4s -3s;
}
@keyframes move{
  0%{
    left: 0;
  }
  100%{
    left: 500px;
  }
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

上面的代码中,第二个div元素延迟时间是-3(当然这里采用复合写法),那么动画会立刻开始,但是前三秒的动画不会执行而是执行3-4秒之间的动画。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部