css动画animation
时间: 2023-08-16 08:14:54 浏览: 45
CSS动画是一种通过在元素上应用动画效果来改变其外观或行为的技术。animation属性是用于定义动画效果的主要CSS属性。它允许您指定动画的持续时间、延迟、重复次数、播放状态等。
下面是一个简单的示例,展示了如何使用CSS动画创建一个元素的渐变颜色效果:
```css
/* 定义动画 */
@keyframes colorChange {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: blue;
}
}
/* 应用动画 */
.element {
width: 100px;
height: 100px;
animation-name: colorChange;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
```
在上面的示例中,我们首先使用@keyframes关键字定义了一个名为colorChange的动画。这个动画从0%到50%的时间段内背景颜色从红色过渡到黄色,然后从50%到100%的时间段内背景颜色从黄色过渡到蓝色。
然后,我们将animation-name属性设置为colorChange,这样元素就会应用这个动画。我们还使用animation-duration属性指定了动画的持续时间为3秒,animation-timing-function属性指定了动画的时间函数为线性(即匀速),animation-iteration-count属性指定了动画的重复次数为无限次。
这只是一个简单的示例,您还可以使用其他CSS属性和关键帧来创建更复杂的动画效果。希望这能对您有所帮助!如果您有任何进一步的问题,请随时提问。