CSS animation 属性
CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
实例
使用简写属性,将动画与 div 元素绑定:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。
属性 | |||||
---|---|---|---|---|---|
animation | 43.04.0 -webkit- | 10.0 | 16.05.0 -moz- | 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- |
定义和用法
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
默认值: | none 0 ease 0 1 normal |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animation="mymove 5s infinite" |
语法
animation: name duration timing-function delay iteration-count direction;
animation 属性也可以指定多组动画,每组之间用逗号相隔。
每组动画规定的属性如下:
以下属性出现0次或1次:
- <single-transition-timing-function>
- <single-animation-iteration-count>
- <single-animation-direction>
- <single-animation-fill-mode>
- <single-animation-play-state>
animation 的 name 值可能是:none,<custom-ident>, <string>
<time> 可能会出现0、1 或 2 次
每个动画定义中的属性值的顺序很重要:可以被解析为 <time> 的第一个值被分配给animation-duration, 第二个分配给 animation-delay。
每个动画定义中的值的顺序,对于区分 animation-name 值与其他关键字也很重要。解析时,对于除 animation-name 之外的有效的关键字,必须被前面的简写中没有找到值的属性所接受。此外,在序列化时,animation-name 与以及其他属性值做区分等情况下,必须输出其他属性的默认值。
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
相关页面
CSS3 教程:CSS3 动画