当前位置：首页 > news >正文

CSS从入门到精通——动画:CSS3动画执行次数和逆向播放

news 来源：原创 2024/7/2 16:30:44

任务描述

本关任务：用 CSS3 实现loading效果。效果图如下：

相关知识

为了完成本关任务，你需要掌握：1.动画执行次数，2.动画反向播放。

需要实现的效果如下：

动画执行次数

动画从开始到结束（0%到100%）称为一个动画的周期，也就是说，动画执行了一次。

基本的结构如下（这里省略了部分样式）：

<div class="box"><span>0%</span><span>100%</span>
</div>
.box{ width: 0px;}

效果图如下：

先创建一个动画名称为progress的动画。代码如下：

@keyframes progress{0% { width: 0px; }100%{ width: 300px; }
}

然后把这个动画绑定到class="box"元素上就可以了。代码如下：

.box{animation: progress 2s ease;
}

效果图如下：

可以看出，这里动画只执行了一次。如何让它执行多次呢？这里用到animation-iteration-count属性，它的值有：

n，表示动画播放次数的数值；
infinite，表示动画无限次播放；

这里先执行3次，代码如下：

.box{animation: progress 2s ease 3;
}

效果如下：

动画反向播放

上面进度条从100%到0%时是直接消失的，怎么让它逐渐消失呢？

第一种思路：把从0%到100%，100%到0%看作动画的一个周期。这时总完成时间就会翻倍。

实现代码如下：

@keyframes progress{0% { width: 0px;}50%{ width: 300px;}100%{ width: 0px;}
}
.box{animation: progress 4s ease;
}

效果如下：

因为这里的动画比较简单，这样写没什么问题。但动画效果比较复杂时，需要计算的东西就比较多了，也比较麻烦。

第二种思路：利用属性animation-direction，它规定了动画是否在下一周期逆向播放。它的值有：

normal，默认值，表示正常播放；
reverse，表示动画反向播放；
alternate，动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放；

可以利用animation-direction: alternate; 让动画第二次反向播放。

实现代码如下：

.box{animation: progress 2s ease 3 alternate;
}

效果如下：

注意：alternate这个值在 动画次数≥2 的时候才有效果；

编程要求

根据提示，在右侧编辑器补充代码，实现loading效果。要求如下：

动画名称为loading；
动画一次完成的时间：外面的为1s，里面的为1.5s；
动画的速度曲线为linear;
动画完成的次数为无限次；
外面的顺时针旋转，里面的逆时针旋转；

提示：

animation-direction: reverse;可以实现动画反向播放；
注意动画简写的顺序；

为了方便评测， CSS 都是需要以分号;结尾的。

效果如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}@keyframes loading{0%{ transform: rotate(0deg); }100%{ transform: rotate(360deg); }}.box{position: relative;width: 100%;height: auto;background: black;}.big{width: 40px;height: 40px;border: 5px solid red;border-radius: 50%;border-color: red red transparent transparent;position: absolute;left: 100px;top: 100px;/************ Begin **************/animation:loading 1s linear infinite;/************* End ***************/}.small{width: 20px;height: 20px;border: 5px solid red;border-radius: 50%;border-color: transparent transparent red red;position: absolute;left: 110px;top: 110px;/************ Begin **************/animation:loading 1.5s linear infinite reverse;/************* End ***************/}</style>
</head>
<body><div class="box"><div class="big"></div><div class="small"></div></div>
</body>
</html>