css动画 animation 关键帧 @keyframes
动画
定义动画
- @keyframes 动画名称 {
form{} 初始状态，如果和盒子状态相同可省略 form{} === 0%{}
结束状态to{} ===100%{}
}
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(1000px);
}
}
调用动画
-
animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
- 速度曲线：linear 匀速 补间动画
- 速度曲线：steps(数值) 逐帧动画
- 重复次数：infinite 无限播放
- 动画方向：alternate 交替播放
- 执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效
-
animation-name:动画名称，必须
-
animation-duration:动画时长，必须
-
animation-timing-function:速率曲线： linear匀速
-
animation-interation-count:动画次数，infinite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/* 动画名称 */
/* animation-name: move; */
/* 动画持续市场 */
/* animation-duration: 2s; */
/* 速度曲线 */
/* animation-timing-function: linear; */
/* 重复次数 */
/* animation-iteration-count: infinite; */
/* 延迟时间 */
/* animation-delay: 2s; */
/* 动画执行方向 */
/* animation-direction: alternate; */
/* 动画执行完毕时状态 */
/* animation-fill-mode: forwards; */
/* animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 */
animation: move 2s linear infinite;
}
.box:hover {
/* 鼠标移入时暂停动画 */
animation-play-state: paused;
}
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(1000px);
}
}
</style>
</head>
<body>
<div class="box"></div>
<br />
<br />
<div class="box2"></div>
</body>
</html>
