animation用法
时间: 2023-08-09 10:05:12 浏览: 45
Animation 是一个在 web 开发中用于实现动画效果的 CSS 属性,可以通过改变元素的属性值来使其产生动画效果。Animation 属性需要指定以下属性:
1. animation-name:动画名称,必须定义在 @keyframes 中;
2. animation-duration:动画执行时间;
3. animation-timing-function:动画的时间函数,用于控制动画的执行速度;
4. animation-delay:动画延迟执行的时间;
5. animation-iteration-count:动画执行次数;
6. animation-direction:动画的方向,可设置为 alternate 使动画来回执行;
7. animation-fill-mode:动画执行前后元素的样式,可设置为 forward 或 backward;
8. animation-play-state:动画的执行状态,可设置为 paused 或 running。
例如,下面的代码实现了一个简单的动画效果,让一个 div 元素在 2 秒内向右移动 200px:
```css
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 2s;
}
@keyframes move {
from {left: 0;}
to {left: 200px;}
}
```
在这个例子中,@keyframes 定义了一个名为 move 的动画,从 left: 0 开始,到 left: 200px 结束。在 div 元素中,animation-name 属性指定了动画名称,animation-duration 属性指定了动画执行时间。执行结果是 div 元素向右移动了 200px。