CSS3中的关键帧动画
1.创建动画
第一种方法:
@keyframes 动画名称(必须是英文){
from{当前样式 } (可省略)
to{当前样式};
}
第二种方法:
@keyframes 动画名称{
0%{};
25%{};
50%{};
75%{};
100%{};
/*表示在不同的时间段实现什么样的效果*/
}
2.引用动画
综合设置:animation:动画名称 执行时间 执行次数 延迟执行时间 是否在下一个周期反向播放 时间曲线 动画完成之后保存在那个状态;
也可分开设置,如下:
3.属性
(1)animation-name:动画的名称。
(2)animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是0.
(3)animation-timing-function:速度曲线
ease默认先慢,再快,再慢
linear匀速
ease-in:由慢到快。
ease-out:由快到慢。
ease-in-out:由慢到快再到慢。
step-start:跳到鼠标开始那帧。
step-end:跳到鼠标结束那帧。
(4)animation-delay规定动画何时开始。默认是0,允许负值。
(5)animation-iteration-count规定动画被播放的次数。默认是1,
infinite无限循环
(6)animation-direction:规定动画是否在下一个周期逆向的播放。默认是“normal”
alternate反向播放。
(7)animation-play-state规定动画是否正在运行或暂停。默认是“running”。
paused暂停
(8)animation-fill-mode规定对象动画时间之外的状态。
none:不改变默认行为
forwards当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
注释:在@keyframes中创建动画时,把它捆绑到某个选择器,否则不会产生动画效果(就是必须创建后被引用了才会有效果)。通过规定以下两项CSS3动画属性,即可将动画捆绑到选择器:
1.规定动画的名称
2.规定动画的时长
IE10、Firefox以及Opera支持@keyframe规则或animation属性
Chrome和safari需要前缀-webkit-。
IE9以及更早的版本,不支持@keyframe规则或animation属性。

被折叠的 条评论
为什么被折叠?



