CSS3 帧动画入门详解！

1.帧动画

定义关键帧，设计帧动画前先定义关键帧。css3使用@keyfames命令来定义关键帧。代码如下
ekeyframes animationname (
keyframes-selector (
css-styles;
参数说明如下。
定义动画的名称。
定义帧的时间位置,也就是动画时长的百分比,合法取值包括:等价于0%)、to(等价于。表示一个或多个合法的Css样式属性。
在动画过程中,用户能够多次改变这套CSS样式。为了获得最佳浏览器支持,设计关键能家应该始终定义0%和100%的位置帧。
设计说明：
本例使用CSs3帧动画设计一个小方盒,让其沿着方形框内壁匀速运动,如下图所示：

代码如下：

2.定义帧动画

动面与过渡动画功能相同

都是通过改变元素的Cs属性来模拟动画画可以指定多个
不同点:过渡动画只能指定属性的初始值和结束值
然后进行平滑过渡:物动
关键帧,然后在不同关键帧之间进行平滑过渡。过渡动画需要用户行为进行触发,关键帧动画
因此,可以使用过渡动画设计简单的、交互性的慢动作,使用帧动画演绎比较生成的动画场景。
可以自动播放,也可以使用CSs进行控制。
属性包含多个子属性,用来设置动画细节,简单介绍如下,详细用法请参考CSs3参考手册。
定义CSs动画的名称。

animation-duration:定义Css动画播放时间。
animation-timing-function定义CSs动画类型。

animation-iteration-count:定义CSs动画延迟播放的时间
animation-direction:定义CSs动画的播放次数,
animation-play-state:定义CSs动画的播放方向。
animation-fill-mode:定义动画正在运行,还是暂停。

定义动画外状态。
本例设计一个跑步动画效果,主要使用CS35帧动画控制一个序列人物跑步的背景图像,在页面固
镜头”中快速切换实现动画效果,如下图所示。

代码如下：

完结！！

作者在校生记录博客