css动画
时间: 2023-07-24 09:10:58 浏览: 119
CSS动画
CSS动画是通过CSS属性的变化来实现动画效果的一种技术。可以使用CSS动画来实现各种效果,比如旋转、缩放、移动、渐变等等。以下是一个简单的CSS动画示例:
```css
.box {
width: 50px;
height: 50px;
background-color: red;
animation: myanimation 2s ease-in-out infinite;
}
@keyframes myanimation {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
```
这个示例定义了一个正方形div,通过`animation`属性指定了动画名称、持续时间、动画时间函数和是否重复播放。在`@keyframes`中定义了动画的关键帧,也就是在动画的不同时间点需要改变的CSS属性值。这个示例中的动画是一个旋转360度的效果,持续时间为2秒,缓动函数为缓进缓出,一直重复播放。
阅读全文