css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果？ 用法：animation:xz 3s 2 4s alternate; 参数：animati
程序员文章站
2022-05-02 20:30:03
...
css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果？
用法：animation:xz 3s 2 4s alternate;
参数：animation:动画名称 执行时间 执行次数(数字或infinite) 延迟时间 是否反向重复;
动画名称在@keyframes 后面设置，即@keyframes xz代码如下
<html>
<head>
<style>
.play{width:200px;
height:200px;
background:blue;
color:#fff;
margin:60px auto;
animation:xz 3s 2 0.4s alternate;
}
@keyframes xz{
from{transform:rotate(0deg);}/*初始值*/
to{transform:rotate(360deg);}/*结束值*/
}
</style>
</head>
<body>
<div class="play">转起来</div>
</body>
</html>
是不是简单粗暴容易懂啊，哈哈哈…
css3 | 中的transition动画效果-如何使用纯css实现动画效果？
最后再说说如何停掉/重启动画：
这里先说一种用js停止/重启动画的方式
比如下面这个例子
下一篇： 在云计算时代刀片服务器有什么优势？