9.1、@keyframes关键帧
程序员文章站
2022-03-16 19:01:58
...
@keyframes定了一个动画，可以由多个帧组成。例如
@keyframes my_name{
0%{
transform: translateY(-100px);
}
50%{
transform: translateY(-50px);
}
100%{
transform: translateY(100px);
}
}
可知my_name动画由两帧组成，第一帧从0%到50%，第二帧从50%到100%，0%、50%、100%指的是animation-duration的时间比例。比如animation-duration：2s，则前1s内，从transform: translateY(-100px)运动到transform: translateY(-50px);处；在后1s内，从transform: translateY(-50px)运动到transform: translateY(100px)。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#wrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#wrap > .box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
border: 1px solid;
background: pink;
border-radius: 50%;
/*动画*/
animation-name: my_name;
animation-duration: 3s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: both;
}
@keyframes my_name{
0%{
transform: translateY(-100px);
}
50%{
transform: translateY(-50px);
}
100%{
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
</div>
</div>
</body>
</html>
当动画开始时，小球在第1s内由-100px运动到-50px，在第2s内由-50px运动到100px处。由于animation-iteration-count：2，表示帧要重复两次，是对my_name中的所有帧都重复两次，所以，在第3s内再由100px处运动到-50px处，最后，由-50px处运动到-100px处，结束动画。
上一篇： vue中使用animate.css，数据改变并运行动效
下一篇： jQuery 动画笔记