目录
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
animation-name: 要对当前元素生效的关键帧的名字
animation-iteration-count 动画执行的次数
animation-play-state: 设置动画的执行状态
一、动画的作用
动画
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
二、动画相关属性
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间
动画的延时
动画的时序函数
animation-iteration-count 动画执行的次数
animation-direction
animation-play-state: 设置动画的执行状态
animation-fill-mode: 动画的填充模式
综合写法
三、动画相关示例
代码
<!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>Document</title>
<style>
div{
width: 163px;
height: 216px;
background-image: url("./images/背手跑.png");
margin: 0 auto;
margin-top: 250px;
animation: test 1s steps(5) infinite;
}
@keyframes test {
from{
background-position: 0 0;
}
to{
background-position: -842px 0;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>效果图
代码
<!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>Document</title>
<style>
div{
width: 133.4px;
height: 134px;
background-image: url("./images/小恐龙.png");
margin: 0 auto;
margin-top: 300px;
animation: test 1s steps(6) infinite;
}
@keyframes test {
from{
background-position: 0 0;
}
to{
background-position: -800px 0;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>效果图
代码
<!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>Document</title>
<style>
div{
width: 256px;
height: 256px;
margin: 0 auto;
margin-top: 200px;
background-image: url("./images/bg2.png");
animation: test .5s steps(6) infinite;
}
@keyframes test {
from{
background-position: 0 0;
}
to{
background-position: -1536px 0;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>效果图
