<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes zhuan {
0%{transform: rotate(0)}
/*3%{transform: rotate(180deg)}*/
100%{transform: rotate(360deg)}
}
#box{
width: 300px;
height: 300px;
background: red;
margin: 100px auto 0;
animation: zhuan 5s linear 2s infinite;
}
</style>
</head>
<body>
<div id="box">cjsd</div>
</body>
</html>
animation是动画属性,animation制作动画需要两步，首先用@keyframes声明动画，再用animation调用动画
@keyframes后边跟着动画名称，在这里的动画名称是zhuan
书写内容用from和to,或者0%和100%，from相当于0%，to相当于100%，这里0的百分号不可以省略
animation的顺序是：名称 周期时间 速度 延迟时间 播放次数
linear是匀速，infinite是一直转