html中animation用法
时间: 2024-03-05 14:54:05 浏览: 14
在HTML中,可以使用CSS3的animation属性来创建动画效果。animation属性可以通过关键帧(keyframes)来定义动画的起始状态、中间状态和结束状态。以下是animation属性的语法和一些常用属性:
语法:
```
animation: name duration timing-function delay iteration-count direction fill-mode;
```
常用属性:
- name:动画名称,可以自定义。
- duration:动画持续时间,单位为秒或毫秒。
- timing-function:动画时间函数,用于指定动画的速度曲线。
- delay:动画延迟时间,单位为秒或毫秒。
- iteration-count:动画播放次数,可以使用数字或者infinite(无限播放)。
- direction:动画方向,可以是normal(正常方向)、reverse(反向播放)或alternate(正反交替播放)。
- fill-mode:动画填充模式,可以是none(不填充)、forwards(保留动画结束状态)或backwards(保留动画开始状态)。
例如,以下是一个简单的动画示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
animation: example 2s linear 1s infinite alternate;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
```
这个例子中,我们定义了一个名为“example”的动画,让一个div元素在2秒内从红色变成黄色,然后再从黄色变成红色,循环播放。