@keyframes 关键帧动画 设置动画名字
以百分百来规定改变发生的时间 或者通过关键词“from”和“to”，等价于 0% 和 100%
0% 是动画的开始时间 100% 动画的结束时间
HTML部分：
<section></section> <div></div>
css部分：
body{
margin: 0;
}
section{
width: 100px;
height: 100px;
background-color: red;
animation-name: colors,rotate;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/*animation: colors 5s linear infinite;*/
transform-origin: -50px -50px;
position: absolute;
top: 300px;
left: 50%;
}
div{
width: 10px;
height: 10px;
background-color: red;
position: absolute;
top: calc(300px - 55px);
left: calc(50% - 55px);
}
@keyframes rotate{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
@keyframes colors{
0%{
background-color: red;
}
15%{
background-color: green;
}
30%{
background-color: yellow;
}
45%{
background-color: cyan;
}
60%{
background-color: blue;
}
75%{
background-color: purple;
}
85%{
background-color: orange;
}
100%{
background-color: darkcyan;
}
}
演示效果：(打不开情况下请右键在新标签中打开)
