css animation属性怎么使用
时间: 2023-10-31 11:55:00 浏览: 47
CSS中的animation属性用于制作动画效果。该属性是一个简写属性,可以设置六个不同的动画属性。
下面是animation属性的语法:
animation: 动画名称 动画时长 动画速度曲线 延迟播放次数 方向 填充模式;
其中,动画名称是使用@keyframes定义的关键帧动画的名称;动画时长是指动画的持续时间;动画速度曲线可以使用关键字(如ease, linear等)或贝塞尔曲线来定义动画的加速度;延迟是指动画开始播放之前的等待时间;播放次数指动画的重复次数;方向指动画的播放方向(正常播放或反向播放);填充模式指动画播放前和播放结束之后的样式。
例如,要创建一个名为"myAnimation"的动画,持续时间为2秒,以ease-in-out速度进行播放,延迟0.5秒开始,循环播放3次,播放方向为正常,填充模式为向前填充,可以使用以下代码:
```
@keyframes myAnimation {
0% {
/* 初始样式 */
}
100% {
/* 结束样式 */
}
}
.element {
animation: myAnimation 2s ease-in-out 0.5s 3 normal forwards;
}
```
上述代码定义了一个关键帧动画"myAnimation",在animation属性中将该动画应用于名为"element"的元素。该动画将从0%到100%的时间范围内逐渐改变元素的样式,持续时间为2秒,以ease-in-out速度进行播放,延迟0.5秒开始,循环播放3次,播放方向为正常,填充模式为向前填充。
希望能对你有所帮助。 <span class="em">1</span><span class="em">2</span><span class="em">3</span>