1，使用特点：
animation? 作为延迟时间 ，和触发css的操作
transform ：百分百操作，上面的延迟动作
2，呈现效果
?3，代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>主页面</title>
</head>
<body>
<ul class="card-list clearfix">
<li class="card-li" id="abc1" onmouseover="a(1)"><i class=""></i><img src="https://pic.51ifonts.com/images/client-index/card1.jpg" alt="" class=""></li>
<li class="card-li" id="abc2" onmouseover="a(2)"><i class=""></i><img src="https://pic.51ifonts.com/images/client-index/card2.jpg" alt="" class=""></li>
<li class="card-li" id="abc3" onmouseover="a(3)"><i class=""></i><img src="https://pic.51ifonts.com/images/client-index/card3.jpg" alt="" class=""></li>
<script>
function a(i){
var obj = document.getElementById("abc"+i)
obj.className="card-li baidong"
}
</script>
<style>
.card-li {
float: left;
margin-right: 42px;
width: 84px;
height: 228px;
background: #fff;
border: 1px solid #d9ddea;
box-shadow: 0 1px 5px 0 rgb(217 221 234 / 56%);
border-radius: 42px;
padding-top: 36px;
text-align: center;
transform-origin: 42px 36px;
}
.card-li.baidong{
animation: rotate5 5s ease-in-out;
}
@-webkit-keyframes rotate5{
0%{
-webkit-transform:rotate(0deg);
}
20%{
-webkit-transform:rotate(9deg);
}
40%{
-webkit-transform:rotate(-9deg);
}
60%{
-webkit-transform:rotate(-3deg);
}
80%{
-webkit-transform:rotate(3deg);
}
100%{
-webkit-transform:rotate(0deg);
}
}
</style>
</body>
</html>