这里直接贴代码了,跑一遍再看看代码基本上就懂了。
无非就是说一下,关键帧可以在每一帧中设置自己想要的属性,然后可以定义帧的长短等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关键帧</title>
<style>
.outer{
height: 500px;
border-bottom: 10px solid grey;
margin: 50px auto;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: tomato;
animation: ball 2s forwards ease-in;
}
@keyframes ball{
from{
margin-top:0px;
}
20%,60%,to{
margin-top: 400px;
animation-timing-function: ease-in;
}
40%{
margin-top: 100px;
}
80%{
margin-top: 200px;;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
</div>
</body>
</html>