手把手教你制作CSS3 animate关键帧动画

动画在网页中已经有很广泛的应用了，因为动画可以让网页变得丰富多彩，吸引用户，成为网页中的亮点。

网页动画分为6种类型：Gif、flash(swf)、js、css3动画(transition animate)、svg 和canvas。

帧（frame）动画的概念

海文老师觉得，学习css3 animate 动画之前，最好有帧（frame）动画的概念，学起来更快些。

我们可以借助fireworks认识一下帧面板,与css3样式的对应。

动画所需条件有三个：

1、图片（对象或者元素）；

2、帧面板；

3、上述两者关联(绑定)

Css3关键帧动画

关键帧（keyframes）动画。可以像过渡动画transtion那样定义第一帧和最后一帧这两个关键帧，还可以定义任意多的关键帧，因而能实现更复杂的动画效果。

关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。

格式为：

1 下面类似帧面板：

关键帧：百分比形式

@keyframes 动画名称{

时间点 {元素状态}

时间点 {元素状态}

…

}

例如：

@keyframesmov1{

0% {transform: translate(0，0); }

…

100% {transform: translate(240px, 120px); }

}

或者：

@keyframesmov2{

from {transform: translate(0，0); }

…

to {transform: translate(240px, 120px); } }

2 帧面板与元素关联（绑定）

元素(#plane){

Animation:动画1 2s;

}

3．Html中的元素：

Html:

元素

/*动画简写方式*/

简写时最少只写两个属性就可以。一个动画名，一个是总时间。

/*name duration timing-function delay count direction mode*/

/*名称运行总时间运行方式延迟运行次数方向性动画结束状态*/ -webkit-animation:mymov 2s ease 0s infinite;

/*-webkit-animation-name:mymov;//动画名称

-webkit-animation-duration:10s;//运行总时间

-webkit-animation-delay:0s;//时间延迟

-webkit-animation-iteration-count:infinite;//运行次数

-webkit-animation-timing-function:ease;

-webkit-animation-direction:normal;//交替

-webkit-animation-play-state:running;*/此属性在简写方式中没有-webkit-animation-fill-mode forwordbackworks 确定动画结束后停留在开始还是结束。

/*动画名称绑定*/

/* Safari and Chrome: */

/*name duration timing-function delay count direction state -webkit-animation:one 5s linear 2s infinite normal running;*/ /*绑定的动画名称*/

-webkit-animation-name:one;

/*运行总时间*/

-webkit-animation-duration:10s;

/*动画延迟时间*/

-webkit-animation-delay:2s;

/*动画运行的方式是否加速*/

-webkit-animation-timing-function:ease-in-out;

/*重复次数*/

-webkit-animation-iteration-count:infinite;

/*运行方向*/

-webkit-animation-direction:alternate;

/*动画状态*/

-webkit-animation-play-state:running;

/*

这里有几个比较关键的单词希望同学们花些心思记住。

alternate [英]?:l?t?:n?t

[美]??:lt?rn?t

adj. 轮流的;交替的;间隔的;代替的

vi. 交替;轮流

vt. 使交替;使轮流

iteration

英[??t??re??n]

美[??t??re??n]

n. 反复;重述;重述的事;[计算机]循环

infinite [英]??nf?n?t

[美]??nf?n?t

adj. 无限的，无穷的;无数的，许许多多的;极大的

n. 无限，无穷;[数] 无穷大;宗造物主，神;无限的事物*/

下面的表格列出了 @keyframes 规则和所有动画属性：

@keyframes 规定动画。 3

3 animation 所有动画属性的简写属性，除了

animation-play-state 属性。

animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 "ease"。linear ease-in

3

ease-out ease-in-out

animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。infinite 无限 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是

3

"normal"。reverse反向 alternate交替

3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

paused 暂停[,running | paused]

animation-fill-mode规定对象动画时间之外的状态。none forwards

3

backwards both

animation-timing-function：linear | ease | ease-in | ease-out || ease-in-out

| steps( [, start | end ]) | step-start | step-end ]|

cubic-bezier(, , , ) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) | steps( [, start | end ]) | step-start | step-end ]]*

默认值：ease

取值：

linear：

线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：

平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：

由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：

由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：

由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier(, , , )：

特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

step-start：

马上转跳到动画结束状态。

step-end：

保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。

steps([, [ start | end ] ]?)：

第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。