• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • animation-delay

    版本:CSS3

    animation-delay CSS属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。0s是该属性的默认值,代表动画在应用到元素上后立即开始执行。否则,该属性的值代表动画样式应用到元素上后到开始执行前的时间长度;定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如,如果设定值为-1s,动画会从它的动画序列的第1秒位置处立即开始。如果为动画延迟指定了一个负值,但起始值是隐藏的,则从动画应用于元素的那一刻起就获取起始值。通常用animation简写属性一次性设置动画效果较为方便。

    示例

    animation-delay: 3s;
    animation-delay: 2s, 4ms;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持animation-delay

    语法

    animation-delay:<time>

    <time>从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位,定义无效。

    默认值0s
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    实例

    <style>
    div
    {
    	width:100px;
    	height:100px;
    	background:red;
    	position:relative;
    	animation:demo 5s infinite;
    	animation-delay:1s;
    	/*safari和chrome*/
    	-webkit-animation:demo 5s infinite;
    	-webkit-animation-delay:1s;
    }
    @keyframes demo
    {
    	from{left:0px;}
    	to{left:450px;}
    }
    @-webkit-keyframes demo
    {
    	from{left:0px;}
    	to{left:450px;}
    }
    </style>
    </head>
    <body>
    <div></div>

    效果图: