<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转17</title>
<style>
div:nth-child(1){
width: 100px;
height: 100px;
background: darkturquoise;
border-radius: 7px;
margin: 30px;
animation: remove 5s forwards infinite; /*引用动画*/
animation-fill-mode: forwards; /*保持最后的状态使最后保持粉色*/
text-align: center;
line-height: 100px;
color: #fff;
font-weight: bold;
position: relative;
cursor: pointer;
}
@keyframes remove{
from{transform: rotateY(0deg);left: 0;}
25%{transform: rotateY(25deg);background: chartreuse; left: 0;}
50%{transform: rotateY(0deg);background: chartreuse; left: 500px;}
55%{transform: rotateY(0deg);background: chartreuse; left: 500px;}
70%{transform: rotateY(0deg);background: chartreuse; left: 500px;}
to{transform: rotateY(-360deg);background: salmon; left: 0;}
}
div:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div>旋转</div>
</body>
</html>