CSS animation (动画)

css animation 语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

css animation 属性值

说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。

 

css animation 浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, 和 Opera 支持 CSS3 animation(动画)属性.

Safari和Chrome通过私有属性-WebKit-animation支持。

注意: Internet Explorer 9 及更早IE版本不支持动画属性。

默认值: none 0 ease 0 1 normal
继承: no
版本: CSS3
JavaScript 语法: object.style.animation="mymove 5s infinite"

 

css animation 实例

使用简写属性把 animation 绑定到一个<div> 元素:

div{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

在线运行

 

相关文章

CSS3 tutorial: CSS3 动画

分享到