如何创建动画和使用动画

今天写一个如何让创建动画和使用动画，下面通过一个案例简单演示一下。

<section>
    <aside></aside>
</section> 

section {
width: 600px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}

aside {
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
/*使用动画
书写格式：
animation: 动画名称 动画时长 播放次数;
注：播放次数（数值、infinite无限循环）
*/
animation: F70 3s infinite;
}

section:hover>aside {
background-color: skyblue;
}

/*创建动画
书写格式：
@keyframes 自定义动画名称
{
0%{CSS代码块}
50%{CSS代码块}
100%{CSS代码块}
}

如果起始位置与结束位置相同
则可以省略结束位置的设置
*/
@keyframes F70 {
0% {
left: 0;
top: 0;
background-color: red;
}
30% {
left: 200px;
top: 0;
background-color: blue;
border-radius: 50%;
}
60% {
left: 200px;
top: 100px;
border-radius: 0;
background-color: green;
}
90% {
left: 0px;
top: 100px;
border-radius: 50%;
background-color: yellow;
}
}

这就是一个section在aside里面的一个动画过程，其中百分之多少代表的时间。这里给了父元素section一个相对定位，给了子元素aside一个绝对位置我们的aside才能在section里面动来动去哦。