1. `@keyframes`：界说动画的关键帧，用于创立动画序列。

2. `animationname`：指定要运用的动画称号，与`@keyframes`规矩中的称号匹配。

3. `animationduration`：设置动画完结一个周期所需的享用，单位为秒或毫秒。

4. `animationtimingfunction`：界说动画的速度曲线，如`ease`、`linear`、`easein`、`easeout`、`easeinout`、`cubicbezier`等。

5. `animationdelay`：设置动画开端前的延迟享用，单位为秒或毫秒。

6. `animationiterationcount`：指定动画应该播映的次数，可所以详细的数字或`infinite`（无限循环）。

7. `animationdirection`：界说动画播映的方向，如`normal`（默许，向前播映）、`reverse`（反向播映）、`alternate`（替换播映，先向前再向后）、`alternatereverse`（替换反向播映，先向后再向前）。

8. `animationfillmode`：设置动画在播映之前或之后的方针状况，如`none`（不运用任何款式）、`forwards`（坚持动画结束时的状况）、`backwards`（坚持动画开端时的状况）、`both`（明显运用`forwards`和`backwards`）。

9. `animationplaystate`：操控动画的播映状况，如`paused`（暂停）和`running`（播映）。

10. `transition`：这是一个简写特点，用于在指定的享用内滑润地过渡一个或多个CSS特点的改动。它包含四个子特点：`transitionproperty`（指定要过渡的CSS特点）、`transitionduration`（指定过渡享用）、`transitiontimingfunction`（指定过渡的速度曲线）、`transitiondelay`（指定过渡开端前的延迟享用）。

11. `transform`：用于对元素进行2D或3D转化，如旋转、缩放、移动、歪斜等。

12. `transformorigin`：界说转化元素的中心点，默许为元素的中心。

13. `perspective`：为3D转化元素设置透视作用，使元素看起来更有深度。

14. `backfacevisibility`：界说当元素反面朝向用户时是否可见，默许为`visible`。

15. `animation`：这是一个简写特点，用于明显设置多个动画特点，如`animationname`、`animationduration`、`animationtimingfunction`、`animationdelay`、`animationiterationcount`、`animationdirection`、`animationfillmode`和`animationplaystate`。

16. `transition`：这是一个简写特点，用于明显设置多个过渡特点，如`transitionproperty`、`transitionduration`、`transitiontimingfunction`和`transitiondelay`。

17. `transform`：这是一个简写特点，用于明显设置多个转化特点，如`translate`、`scale`、`rotate`、`skew`等。

18. `transformorigin`：这是一个简写特点，用于明显设置多个转化原点特点，如`x`、`y`、`z`。

19. `perspective`：这是一个简写特点，用于明显设置多个透视特点，如`perspective`、`perspectiveorigin`。

20. `backfacevisibility`：这是一个简写特点，用于明显设置多个反面可见性特点，如`backfacevisibility`、`visibility`。

这些特点可以独自运用，也可以组合运用，以创立出五光十色的动画作用。

CSS3动画特点详解与运用

一、CSS3动画基本概念

CSS3动画是指经过CSS3的动画特点，使页面元素从一种款式逐步改动为另一种款式的作用。CSS3动画首要包含两种类型：过渡（Transition）和动画（Animation）。

过渡（Transition）

过渡是指当元素的某个特点发生改动时，经过CSS3的过渡特点完结滑润的过渡作用。过渡作用一般运用于鼠标悬停、点击等交互事情。

动画（Animation）

动画是指经过界说关键帧和动画特点，使元素依照特定的途径和速度进行运动。动画作用可以运用于任何元素，包含布景、文字、图片等。

二、CSS3动画常用特点

过渡特点

过渡特点首要包含以下四个：

1. transition-property：指定需求过渡的特点，如`background-color`、`width`等。

2. transition-duration：指定过渡作用继续的享用，单位为秒或毫秒。

3. transition-timing-function：指定过渡作用的速率曲线，如`linear`（线性）、`ease`（滑润）等。

4. transition-delay：指定过渡作用的延迟享用，单位为秒或毫秒。

动画特点

动画特点首要包含以下六个：

1. animation-name：指定动画的称号，与`@keyframes`界说的动画称号相对应。

2. animation-duration：指定动画完结一个周期所花费的享用，单位为秒或毫秒。

3. animation-timing-function：指定动画的速度曲线，如`linear`（线性）、`ease`（滑润）等。

4. animation-delay：指定动画何时开端，单位为秒或毫秒。

5. animation-iteration-count：指定动画的播映次数，如`1`（播映一次）、`infinite`（无限循环）等。

6. animation-direction：指定动画是否应该轮番反向播映，如`normal`（正常）、`reverse`（反向）等。

三、CSS3动画实例

以下是一个简略的CSS3动画实例，完结一个按钮在鼠标悬停时逐步扩大并改动色彩：

```css

/ 界说动画称号和关键帧 /

@keyframes scaleAndChangeColor {

0% {

transform: scale(1);

background-color: fff;

50% {

transform: scale(1.2);

background-color: f00;

100% {

transform: scale(1);

background-color: fff;

/ 运用动画 /

.button {

width: 100px;

height: 50px;

background-color: fff;

border: 1px solid 000;

transition: background-color 0.3s ease;

.button:hover {

animation: scaleAndChangeColor 1s ease infinite;

四、CSS3动画运用场景

CSS3动画在网页规划中有着广泛的运用场景，以下罗列一些常见的运用：

1. 导航栏动画：经过动画作用，使导航栏在鼠标悬停时具有更好的视觉作用。

2. 轮播图动画：运用动画完结轮播图元素的切换作用，提高用户体会。

3. 按钮动画：经过动画作用，使按钮在鼠标悬停时具有更好的交互体会。

4. 图片动画：为图片增加动画作用，使其在页面加载时具有动态感。

CSS3动画特点为网页规划带来了丰厚的表现力，使得静态页面变得愈加生动有趣。把握CSS3动画特点，可以协助规划师提高网页的视觉作用和用户体会。在实践运用中，应根据详细需求挑选适宜的动画作用，以到达最佳的规划作用。

未经允许不得转载：全栈博客园 » css3动画特点