css 开启 animation 动画
时间: 2023-07-17 14:57:19 浏览: 58
要在CSS中开启动画,您可以使用`@keyframes`规则来定义动画关键帧,然后将动画应用到元素上。
下面是一个简单的示例,展示如何使用CSS开启动画:
```css
/* 定义动画关键帧 */
@keyframes example-animation {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
/* 应用动画到元素 */
.element {
animation-name: example-animation;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
```
在上面的示例中,`@keyframes`规则定义了一个名为`example-animation`的动画,它从0%开始时的不透明度为0,到50%时的不透明度为0.5,最后到100%时的不透明度为1。
然后,通过将`animation-name`属性设置为`example-animation`,将动画应用到名为`.element`的元素上。您还可以通过其他属性(例如`animation-duration`、`animation-timing-function`等)来调整动画的持续时间、缓动函数、延迟等。
这只是一个简单的示例,您可以根据自己的需求进行更复杂的动画设置。希望对您有所帮助!