1.定义动画
用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。
@keyframes myfirst
{
0%{background: red;}
100%{background: yellow;}
}
当在 @keyframes
中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3
动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
实例
把 "myfirst"
动画捆绑到div
元素,时长:5 秒
:
div
{
animation: myfirst 5s;
}
注意:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
CSS3 动画属性
-
@keyframes
: 规定动画。 -
animation
: 所有动画属性的简写属性,除了animation-play-state
属性。
简写语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
animation-name
: 规定@keyframes
动画的名称。 -
animation-duration
: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 -
animation-timing-function
: 规定动画的速度曲线。默认是 "ease"。 -
animation-delay
: 规定动画何时开始。默认是 0。 -
animation-iteration-count
:规定动画被播放的次数。默认是 1。 -
animation-direction
: 规定动画是否在下一周期逆向地播放。默认是"normal"
。 -
animation-play-state
: 规定动画是否正在运行或暂停。默认是"running"
。 -
animation-fill-mode
: 规定对象动画时间之外的状态。
网友评论