CSS3@keyframes规则和animation动画

html-css010

CSS3@keyframes规则和animation动画,第1张

CSS3中新增了动画相关的属性，其中@keyframes规则用于设置创建动画，其原理其实就是将一套css样式逐渐变成另外一套css样式，在@keyframes中可以使用百分比表示动画进度对应的样式，0% 是动画的开始样式，100% 动画的结束样式，每个样式可以称为"关键帧样式"，每个动画可以包含很多帧，每一帧可以设置一个或多个样式。语法格式: @keyframes 动画名:{0%:{css样式} ... 100%:{css样式}} ，其中关键帧合法值是0-100%，from与 0% 相同，to与 100% 相同

使用@keyframes定义了动画，那如何使用呢？

那就得在对应要使用该动画的元素上添加animation属性

animation是一个复合属性，是所有动画属性的缩写，除animation-play-state

1. animation-name 动画名，表示要应用哪个动画

2. animation-duration 动画完成一个周期所花费的时间（秒或毫秒数），默认0

3. animation-timing-function 表示动画速度曲线，常用关键字linear、ease、ease-in、ease-out、ease-in-out，默认是ease。还可以使用cubic-bezier(n,n,n,n)设置

4. animation-delay 动画延迟时间，默认0

5. animation-iteration-count 动画播放次数，默认1 只播一次

6. animation-direction 设置动画在下个播放周期是否逆转方向，默认是 "normal"正常播放，alternate轮流反向播放

7. animation-fill-mode 用于设置动画填充模式，none 不改变默认行为；forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both向前和向后填充模式都被应用

8. animation-play-state 设置动画播放状态，paused动画已暂停，running是默认值，表示动画正在运行播放

CSS3 动画属性

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

@keyframes规定动画。

animation所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name规定 @keyframes 动画的名称。

animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3

animation-timing-function规定动画的速度曲线。默认是 "ease"。3

animation-delay规定动画何时开始。默认是 0。3

animation-iteration-count规定动画被播放的次数。默认是 1。

animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。

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

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

下面的两个例子设置了所有动画属性：

实例

运行名为 myfirst 的动画，其中设置了所有动画属性：

div

{

animation-name: myfirst

animation-duration: 5s

animation-timing-function: linear

animation-delay: 2s

animation-iteration-count: infinite

animation-direction: alternate

animation-play-state: running

/* Firefox: */

-moz-animation-name: myfirst

-moz-animation-duration: 5s

-moz-animation-timing-function: linear

-moz-animation-delay: 2s

-moz-animation-iteration-count: infinite

-moz-animation-direction: alternate

-moz-animation-play-state: running

/* Safari 和 Chrome: */

-webkit-animation-name: myfirst

-webkit-animation-duration: 5s

-webkit-animation-timing-function: linear

-webkit-animation-delay: 2s

-webkit-animation-iteration-count: infinite

-webkit-animation-direction: alternate

-webkit-animation-play-state: running

/* Opera: */

-o-animation-name: myfirst

-o-animation-duration: 5s

-o-animation-timing-function: linear

-o-animation-delay: 2s

-o-animation-iteration-count: infinite

-o-animation-direction: alternate

-o-animation-play-state: running

}

可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。例如：

# image {

position: relative//图片的相对位置

animation: falling 1s linear//动画名称为falling，持续时间1s，动画速度变化线性

}

@keyframes falling {

0% { top: 0px} //初始时图片位于顶部

100% { top: 300px} //最终时图片位于300px处

}