动画属性（animation）：
animation-name:规定需要帮规定到选择器的keyframe名称。
animation-duration:规定完成冬花所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟
animation-iteration-count:规定动画应该播放的次数
定义动画
@keyframes anim{
0%{
transform:translate(0px,0px)
}
100%{
transform:translate(900px,100px)
}
}
如果定义的是0%到50% 动画执行时间为10秒 则前5秒会执行0%到50% 后5秒会执行50%到0%
若希望动画平滑无限循环 则可以将0%与100%值设为相同
百分比可以看作时间帧
简写 animation:动画名 动画持续时间 动画函数 动画延迟 动画播放次数(infinite无限次数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
animation: anim 10s ease 1s infinite;
}
@keyframes anim{
0%{
transform:rotate(0deg);
width: 100px;
height: 100px;
}
20%{
width: 200px;
height: 200px;
transform:rotate(360deg)
}
40%{
background-color: yellow;
width: 300px;
height: 300px;
}
100%{
transform:rotate(0deg);
width: 100px;
height: 100px;
}
}
.box:hover{
animation-play-state: paused;
}
@keyframes fromAnim{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
|