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

Flec-hazo

于 2024-06-16 02:10:48 发布

阅读量902

点赞数 4

文章标签： css css3 前端学习 html

本文链接：https://blog.csdn.net/m0_73614626/article/details/139711754

版权

任务描述

本关任务：用 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>