第26章CSS3动画效果-水之原

学习要点：

1.动画简介

2.属性详解

3.简写和版本

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS3 的动画效果，可以通过类似 Flash 那样的关键帧模式控制运行。

一．动画简介

CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。

animation 实现动画效果主要由两个部分组成：1.通过类似 Flash 动画中的关键帧声明一个动画；2.在 animation 属性中调用关键帧声明的动画。

CSS3 提供的 animation 是一个复合属性，它包含了很多子属性。如下表所示：

属性

说明

animation-name

用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加载时会应用 animation-name 指定的动画，从而执行动画。

animation-duration

用来设置动画播放所需的时间

animation-timing-function

用来设置动画的播放方式

animation-delay

用来指定动画的延迟时间

animation-iteration-count

用来指定动画播放的循环次数

animation-direction

用来指定动画的播放方向

animation-play-state

用来控制动画的播放状态

animation-fill-mode

用来设置动画的时间外属性

animation

以上的简写形式

查看更多关于第26章CSS3动画效果-水之原的详细内容...