CSS3动画

最新推荐文章于 2024-09-14 15:26:51 发布

时过变倾

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量565

点赞数 3

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/SOLDIER_ON/article/details/134333255

版权

本文介绍了如何使用CSS3创建动画，包括使用@keyframes定义动画、绑定元素、设置动画属性如名称、持续时间、速度曲线等。还讲解了动画延迟、完成后的状态保持、执行次数和动画方向控制的技巧。

摘要由CSDN通过智能技术生成

第1关：简单的小动画

创建动画

用 @keyframes来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。
在这里插入图片描述
先用@keyframes创建一个动画，这个动画表示字体会从20px变成40px。代码如下：

@keyframes bigfonts{
  from { font-size: 20px;}
   to  { font-size: 40px;}
}

说明：

@keyframes表示创建动画，动画名称是 bigfonts；
from表示这个动画的开始，to表示这个动画的结束；
动画发生的时间也可以用百分比来表示，0%是动画的开始，100%是动画的结束。from和to相当于0%和100%；

绑定元素

然后将动画bigfonts绑定到p元素上就可以了。代码如下：

p:hover{
   animation: bigfonts 2s ease;  
}

效果已经实现了。这里说明一下animation的属性值：
bigfonts是动画的名称；
2s是动画一次完成的时间；
ease表示动画的速度曲线，动画以低速开始，然后加快，在结束前变慢。默认也是ease；

编程要求

根据提示，在右侧编辑器补充代码，实现当滑动到p元素上时，宽度从100px变为400px的效果。要求如下：

动画名称为changeColor；
动画一次完成的时间为2s；
动画的速度曲线为ease-in;
这里动画的开始，结束用from，to；

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document
	</title>
	<style>
     *{
     	margin: 0;
     	padding: 0;
     }
     p{
     	margin: 100px;
     	width: 100px;
     	height: 100px;
     	background: orange;
     }
     /************* Begin ************/   
     /* 创建动画 */
        @keyframes changeColor{
        from { width: 100px;}
        to  { width: 400px;}
        }
     /*绑定元素*/
        p:hover
        {
           animation:changeColor 2s ease-in;
        }
    /************** End **************/   
	</style>
</head>
<body>
	<p></p>
</body>
</html>

第2关：CSS3动画延迟和完成后状态的保持

在这里插入图片描述
相关知识

动画状态

向右移动是利用定位来改变它的left值来实现的。
先创建一个动画名称为greenBall的动画

@keyframes greenBall{
  0% { left: 200px; background: yellow;}
  100%{ left: 400px; background: red;}
}

在这里插入图片描述

动画完成时的状态

animation-fill-mode属性

它规定了动画在播放之前或之后，其动画效果是否可见。其属性值如下：

none，不改变默认行为；
forwards，动画完成后，保持其在100%设置时的状态；
backwards，在延迟的时间内，在动画显示之前，应用其在0%时设置的状态；
both，向前和向后模式都被应用；

.redBall{
   animation: redBall 2s ease-in 2s forwards;
}

这里说明一下动画简写的顺序：

redBall是动画名称；
2s是动画完成的时间；
ease-in是动画完成的速度曲线，表示动画从低速开始；
2s是动画延迟时间；
forwards是动画完成后保持其在100%设置时的状态；

编程要求

根据提示，在右侧编辑器补充代码，实现交通灯在等待2s后，由红灯(red)变为绿灯(green)，然后一直保持的效果。要求如下：

动画名称为light；
一个动画完成的时间为1s；
动画的速度曲线为linear;
动画延迟时间为2s；
这里动画的开始，结束用0%,100%表示；
背景色用background；

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document
  </title>
  <style>
     *{
      margin: 0;
      padding: 0;
     }
     @keyframes car{
      0%{ left: 100px;}
      33%{ left: 400px;}
      66%{ left: 400px;}
      100%{ left: 1000px;}
     }
      
      /*********** Begin (创建动画)***********/
      @keyframes light{
            0%{background:red;}
            100%{background:green;}
      }
      /*********** End ***********/
   .road{
      height: 200px;
      border: 3px dashed #ccc;
      margin-top: 30px;
      padding: 10px;
      position: relative;
   }
   .car{ 
      width: 100px;
      height: 200px;
      transform:rotate(90deg);
      position: absolute;
      top: 20px;
      left: 100px;
      animation: car 6s ease forwards ;
   }
   .light{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: red;
      position: absolute;
      left: 600px;
      top: 0px;
       
      /*********** Begin ***********/
      animation: light 1s linear 2s forwards ;
      /*********** End ***********/
   }
  </style>
</head>
<body>
   <div class="road">
       <img src="https://www.educoder.net/attachments/download/207224" alt="车" class="car">
       <div class="light"></div>
   </div>

</body>
</html>

第3关：CSS3动画执行次数和逆向播放

动画执行次数

animation-iteration-count属性

它的值有：

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

动画反向播放

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

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

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

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

编程要求

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

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

提示：

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

<!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>