animate.css官网
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 转圈</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2789320_zjuxlxfgdzn.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
<style>
.spin-begin {
animation: spin 1s linear infinite;
animation-fill-mode: forwards;
}
.spin-end:hover {
animation-play-state: paused;
}
/*旋转动画*/
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1 class="animate__animated animate__bounce">animate.css 库例子</h1>
<i style="display: inline-block" class="lu icon-huifu spin-begin spin-end"></i>
</body>
</html>
注意
transform对行内元素不生效，如果没有动画效果，考虑添加 style="display: inline-block"
参考：
https://www.cnblogs.com/fayin/p/9755590.html