-
css教程之animation-duration [动画时间]
- 2017-05-26 11:28 来源：未知
语法
animation-duration: <time>[,<time>]*; 指定对象动画的持续时间 。
| 语法项目 | 说明 |
|---|---|
| 初始值 | 0 |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 单位 | S |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
体育彩票排列三 www.o1y4.com.cn 检索或设置对象动画的持续时间
如果提供多个属性值，以逗号进行分隔。
取值
<time>：正数，单位可以是秒(s)或者毫秒(ms)。默认值为0，表明动画不执行。
实例代码
CSS
- .animation_duration{
- left:10px;
- top:100px;
- position:absolute;
- -webkit-animation:0.5s ease 1 forwards;
- -webkit-animation-duration:2s;
- -webkit-animation-name:demo;
- -moz-animation:0.5s ease 1 forwards;
- -moz-animation-name:demo;
- -moz-animation-duration:2s;
- }
- @-webkit-keyframes demo{
- 0%{left:10px;}
- 100%{left:400px;}
- }
复制
HTML
运行一下 »- <div class="demo_box animation_duration">我一共运行了2秒钟</div>
复制
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |
最新更新
css教程之transform-style [3D呈现]
css教程之backface-visibility [隐藏内容的背面
css教程之perspective-origin [透视原点]
css教程之animation-play-state [对象动画的状态
css教程之animation-fill-mode [播放后的状态
css教程之animation-direction [播放方向]
css教程之animation-iteration-count [播放次数
css教程之animation-delay [开始播放时间]
css教程之animation-timing-function [播放方式
css教程之animation-duration [动画时间]
