二、动画- animation动画

gaoya7305

已于 2023-06-19 09:05:43 修改

阅读量1k

点赞数

分类专栏： html+css 文章标签： css3 css 动画

于 2023-06-19 08:28:37 首次发布

本文链接：https://blog.csdn.net/gaoya7305/article/details/131221437

版权

html+css 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文介绍了CSS中的动画效果，通过一个项目展示了如何使用过渡和关键帧动画实现元素的动态位移。文章详细解释了动画与过渡的区别，并通过实例演示了如何设置关键帧动画，使得元素在页面加载时即可自动执行动画，而无需用户交互。此外，还提及了动画的一些重要属性，如动画名称、持续时间、延迟、执行次数和方向等。

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

1.动画

动画的定义

动画：
- 动画和过渡类似，都是可以实现一些动态的效果；
- 不同的是过渡需要在某个属性发生变化时才会触发；
- 动画可以自动触发动态效果；
- 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤；

以一个项目来开始了解他

准备工作：当鼠标移入到box1内， box1下的box2进行margin-left位移, 通过过渡动画，让他在2s内缓慢移动。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 800px;
        height: 800px;
        background-color: silver;
        /* 开启bfc,防止重叠,无法正常的进行margin-top */
        overflow: hidden;
      }

      .box1 div {
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
         /* box1下的box2刚开始是0 */
        margin-left: 0;
      }
      
      .box2 {
       background-color: #bfa;
       transition:2s;
      }
   
      /*当鼠标移入到box1内， box1下的box2进行位移到700px */
      .box1:hover div{
        margin-left: 700px;
      }
      
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
  
    </div>
  </body>
</html>

transition 要发生过渡效果，一定是需要属性样式发生变化的时候才执行。且需要用户去触发了某个行为，比如这里的鼠标移动到box1上。
但是我现在想，一进入页面，动画效果就立即执行，播放动画，不需要用户去触发。这个时候就需要我们的Animation 动画来做。

开始使用animation做动画效果。

先在style 里面，设置关键帧动画。需求：让box2从margin-left:0 移动到 margin-left:700px;

   @keyframes test{
         /* from表示动画的开始位置 也可以使用 0% */
        from{
          margin-left: 0;
        }
        /* to动画的结束位置 也可以使用100%*/
        to{
          margin-left:700px;
        }
      }

现在我们要让box2生效这个动画，只需要在box2中使用即可。
注意：要想box2动画生效，要在这里使用，置了名字后，如果没有设置动画执行时间，也是看不到动画效果的。

  .box2 {
      
       background-color: #bfa;
      /* animation-name: 要对当前元素生效的关键帧的名字 */
       animation-name: test;
        /* animation-duration: 动画的执行时间 */
       animation-duration: 2s;

      }

此时我们完成的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 800px;
        height: 800px;
        background-color: silver;
        /* 开启bfc,防止重叠,无法正常的进行margin-top */
        overflow: hidden;
      }

      .box1 div {
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
        margin-left: 0;
      }
      
      .box2 {
      
       background-color: #bfa;

      /* animation-name: 要对当前元素生效的关键帧的名字 */
       animation-name: test;
        /* animation-duration: 动画的执行时间 */
       animation-duration: 2s;

      }
   
      /*当鼠标移入到box1内， box1下的box2进行位移到700px */
      .box1:hover div{
        margin-left: 700px;
      }

      @keyframes test{
         /* from表示动画的开始位置 也可以使用 0% */
        from{
          margin-left: 0;
        }
        /* to动画的结束位置 也可以使用100%*/
        to{
          margin-left:700px;
        }
      }

      
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
  
    </div>
  </body>
</html>

2.动画的属性

 .box2 {
      
       background-color: #bfa;

      /* animation-name: 要对当前元素生效的关键帧的名字 */
       /* animation-name: test; */
       
        /* animation-duration: 动画的执行时间 */
       /* animation-duration: 2s; */
      
       /* 动画延迟1s后才执行 */
       /* animation-delay: 1s; */
       
       /* 动画先加速后减速的运动 */
       /* animation-timing-function: ease-in-out; */
       
       /* 
            animation-iteration-count 动画执行的次数 
                可选值：
                    次数
                    infinite 无限执行
       */
       /* animation-iteration-count: 1; */
       

         /*
             animation-direction
                指定动画运行的方向
                    可选值：
                    normal 默认值  从 from 向 to运行 每次都是这样 
                    reverse 从 to 向 from 运行 每次都是这样 
                    alternate 从 from 向 to运行 重复执行动画时反向执行
                    alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

        */
       /* animation-direction: alternate-reverse; */


       /* 
                animation-play-state: 设置动画的执行状态 
                可选值：
                    running 默认值 动画执行
                    paused 动画暂停
       */
       /* animation-play-state: paused; */


       /* 动画的填充模式
        none:默认值 动画执行完毕元素回到原来的位置
        forwards:动画执行完毕会停止在动画结束的位置
        backwards:动画延时等待时，元素就会处于开始from 的位置，即这里的margin-left=0
        both: 结合了forwards 和backwards
       */
       /* animation-fill-mode: both; */
       

       /* 综上:可以通过一个属性，直接把大家都设置了
  		2s:动画执行的时间
        2：执行两次
        1s：延迟1s执行
        alternate：去的时候是从前往后，然后在从后往前回来
 	   */
       animation:test 2s 2 1s alternate;



      }