我们要用到的是animation和transform
animation:
animation-name 绑定到选择器
animation-delay 延迟多少时间开始动画
animation-iteration-count 动画的次数
animation-direction 反向播放动画
<!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>
body{
margin-top: 200px;
padding: 0;
}
#box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(241, 87, 125);
animation-name: move;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: 5;
animation-fill-mode: forwards; /*最后固定不动,不会回到原位置*/
}
@keyframes move{
0%{
transform: translate(0px,0px);
}
50%{
border-radius: 0%;
transform: translate(300px,0px);
}
51%{
border-radius: 0%;
transform: translate(300px,0px);
background-color: orange;
}
100%{
border-radius: 50%;
transform: translate(600px,0px);
background-color: rgba(207, 141, 17, 0.87);
}
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
效果展示: