CSS3中的animation属性,通过该属性可以为指定元素设置动画。animation属性
时间: 2024-04-15 18:28:01 浏览: 112
是CSS3中用来创建动画效果的属性。它可以用于指定画的持续时间、动画名称、动画速度、延迟时间以及动画的播放次数等。
animation属性的语法如下:
```
animation: 动画名称 持续时间 运动曲线 延迟时间 播放次数 方向 填充模式;
```
其中,必需的属性为:
- 动画名称:使用@keyframes关键字定义的动画名称,例如`myAnimation`。
- 持续时间:动画从开始到结束的时间,以秒(s)或毫秒(ms)为单位,例如`2s`或`1000ms`。
可选的属性包括:
- 运动曲线:控制动画的速度变化。常用的值有`linear`(线性)、`ease`(缓入缓出)、`ease-in`(渐入)、`ease-out`(渐出)、`ease-in-out`(渐入渐出)等。
- 延迟时间:动画开始前的等待时间,以秒(s)或毫秒(ms)为单位,例如`1s`或`500ms`。
- 播放次数:指定动画的播放次数,可以是一个正整数、无限循环使用`infinite`或者使用关键字`alternate`表示交替播放。
- 方向:指定动画播放的方向,可以是`normal`(默认值,正向播放)或`reverse`(反向播放)。
- 填充模式:指定动画在开始前和结束后的样式,常用的值有`none`(默认值,不改变样式)、`forwards`(保持结束后的样式)、`backwards`(应用开始前的样式)或`both`(同时应用开始前和结束后的样式)。
例如,下面的代码展示了一个简单的动画效果:
```css
@keyframes slide-in {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.element {
animation: slide-in 1s ease-in-out;
}
```
以上代码定义了一个名为`slide-in`的动画,然后将该动画应用到类名为`.element`的元素上,***
阅读全文