主题:装载
最好的总是不需要加载状态的网站。如果他们这样做了,这将是一个平静的。
需求:实现如图动画
遇到的问题:经过第一次分析后,我认为此动画利用设置动画的延迟时间+backwords完成。后来实现发现,设置延迟时间后,动画仅能执行一次。原因:backwords与infinite冲突,动画无法保持最后一帧。
解决方法:动画谁先动谁后动不一定需要设置不同延迟时间来实现,还可通过设置不同百分比的方式,使某一动画保持某一帧,快速开始或结束。例如,在完成本动画时,我们设置三个圆的运动时间都为2s,让最大的圆运动10%时就从小变大,中间第二个圆运动40%时从小变大,最小的圆运动70%时从小变大。因为运动时间是事先规定好的,所以我们可以看到三个动画有一个先后次序(我们肉眼误以为的),其实是设置不同百分比来完成的。再倒放来看,小圆先结束,然后是中间的圆结束,最后是最大的圆结束,最晚开始运动的动画最先结束。
总结:运动时间相同时,不同动画百分比可实现动画的不同效果。
![](https://img-blog.csdnimg.cn/img_convert/e0856f7fa8ef2173b463d43bc61197c2.gif)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
background-color: #E56262;
position: relative;
}
.box>div {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
transform: translate(-50%,-50%);
box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
border-radius: 50%;
animation: three 2s infinite alternate;
}
.box>div>div {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
transform: translate(-50%,-50%);
box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
border-radius: 50%;
animation: two 2s infinite alternate;
}
.box>div>div>div {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%,-50%);
box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
border-radius: 50%;
animation: one 2s infinite alternate;
}
@keyframes one {
0%,70% {
transform: translate(-50%,-50%) scale(0);
}
100% {
transform: translate(-50%,-50%) scale(1);
}
}
@keyframes two {
0%,40% {
transform: translate(-50%,-50%) scale(0);
}
100% {
transform: translate(-50%,-50%) scale(1);
}
}
@keyframes three {
0%,10% {
transform: translate(-50%,-50%) scale(0);
}
100% {
transform: translate(-50%,-50%) scale(1);
}
}
<body>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</body>