• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • animation-duration

    版本:CSS3

    animation-duration属性指定一个动画周期的时长。默认值为0s,表示无动画。使用简写属性animation很方便地同时设置所有的动画属性。

    示例

    animation-duration: 6s
    animation-duration: 120ms
    animation-duration: 1s, 15s
    animation-duration: 10s, 30s, 230ms
    

    浏览器支持

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

    语法

    animation-duration:<time>

    取值:

    • <time>一个动画周期的时长,单位为秒(s)或者毫秒(ms),无单位值无效。

    注意:负值无效,浏览器会忽略该声明,但是一些早起的带前缀的声明会将负值当作0s。

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

    实例

    <style type="text/css">
    div{
    	width:100px;
    	height:100px;
    	position:relative;
    	background-color:hsl(120,65%,75%);
    	animation:demo infinite;
    	-webkit-animation:demo infinite;
    	animation-duration:5s;
    	-webkit-animation-duration:5s;
    }
    @keyframes demo
    {
    	from{left:0px;}
    	to{left:450px;}
    }
    /*safari和chrome*/
    @-webkit-keyframes demo
    {
    	from{left:0px;}
    	to{left:450px;}
    }
    </style>
    </head>
    <body>
    	<div></div>	
    </body>
    </html>

    效果图: