css3，animation，动画属性简介

CSS3是有关于动画方面的几个属性，包括：

1. animation-name

2. animation-duration

3. animation-timing-function

4. animation-delay

5. animation-iteration-count

6. animation-direction

7. animation-fill-mode

8. animation-play-state

下面就分别介绍一下这几个属性的用法：

1. animation-name

animation-name属性定义了一个动画的名称，可以在@keyframes里定义。

例如：

```

@keyframes example {

from {transform: scale(1,1);}

to {transform: scale(2,2);}

}

div {

animation-name: example;

}

```

上面的例子就定义了一个名称为example的动画，通过在div元素上加上animation-name:example属性值，就可以让该元素产生一个从1倍放大到2倍的动画。

2. animation-duration

animation-duration属性定义了一个动画的持续时间，单位为秒(s)或毫秒(ms)。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

}

```

上面的例子中，动画的持续时间为2秒。

3. animation-timing-function

animation-timing-function属性定义了动画的时间函数，也就是动画变化的速度。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

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

}

```

上面的例子中，动画的时间函数为ease-in-out，代表动画将缓慢地开始，逐渐加快直到最终速度，在最后缓慢地停止。

4. animation-delay

animation-delay属性定义了动画开始之前的延迟时间。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

animation-delay: 1s;

}

```

上面的例子中，动画将在1秒钟之后开始。

5. animation-iteration-count

animation-iteration-count属性定义了动画的循环次数。默认为1次，如果想使动画循环无限次，可以将值设为infinite。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

animation-iteration-count: infinite;

}

```

上面的例子中，动画将无限循环。

6. animation-direction

animation-direction属性定义了动画的播放方向。默认值为normal，可选值还包括reverse、alternate和alternate-reverse。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

animation-direction: alternate;

}

```

上面的例子中，动画将交替播放，从原来位置出发，到达目标位置后再回到原来位置，然后重复此过程。

7. animation-fill-mode

animation-fill-mode属性定义了动画在停止播放后元素的样式。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

animation-fill-mode: forwards;

}

```

上面的例子中，当动画结束后，元素将保持动画结束时的状态，而不是回到动画开始前的状态。

8. animation-play-state

animation-play-state属性定义了动画的播放状态，包括running和paused两种状态。

例如：

```

div {

animation-name: example;

animation-duration: 2s;

animation-play-state: paused;

}

```

上面的例子中，动画将保持暂停状态。

下面我们来看看一些具体的使用案例：

1. 图片渐变放大效果

```

@keyframes example {

0% {opacity:0; transform: scale(0);}

100% {opacity:1; transform: scale(1);}

}

img {

animation-name: example;

animation-duration: 1.5s;

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

animation-delay: 0.2s;

animation-fill-mode: forwards;

}

```

2. 文字从左侧进入屏幕

```

@keyframes example {

from {transform:translateX(-100%);}

to {transform:translateX(0);}

}

h1 {

animation-name: example;

animation-duration: 1s;

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

animation-delay: 0.5s;

animation-fill-mode: forwards;

}

```

3. 滚动动画

```

@keyframes example {

0% {transform:translateY(0);}

50% {transform:translateY(-50px);}

100% {transform:translateY(0);}

}

div {

animation-name: example;

animation-duration: 1s;

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

animation-delay: 0;

animation-fill-mode: forwards;

animation-iteration-count: infinite;

}

```

以上是关于CSS3动画属性的简要介绍，希望可以对大家有所帮助。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/