- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-23 13:15:09
animation属性
含义：
为页面创建动画效果
浏览器支持：
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号
| 属性 |  |  |  |  |  |
| 浏览器 | IE | Chrome | Firefox | Safari | Opera |
| animation | 10.0 | 43.0/4.0 -webkit- | 16.0 /5.0 -moz- | 9.0/4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
CSS语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
属性值
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值，请参考initial |
| inherit | 从父元素继承属性，请参考 iinherit |
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demp 5s infinite;
-webkit-animation:demo 5s infinite;
}
@keyframes demo
{
from {left:0px;}
to {left:450px;}
}
@-webkit-keyframes demo
{
from {left:0px;}
to {left:450px;}
}
</style>
</head>
<body>
<div></div>点击 "运行实例" 按钮查看在线实例
效果图：
注意：Internet Explorer 9 及更早IE版本不支持 animation 属性。
推荐手册