前端基础CSS3-（动画）

最新推荐文章于 2024-04-03 04:31:56 发布

原创最新推荐文章于 2024-04-03 04:31:56 发布 · 242 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画 #html5

前端基础专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS3中的动画属性，包括animation-name、duration、timing-function等，并讲解了如何定义动画关键帧、调用动画以及控制动画行为。同时，提到了animation-play-state属性用于暂停或恢复动画效果，帮助开发者更好地掌握前端动效设计。

一、动画属性animation

animation:

name(动画名称-必选) duration（持续时间-必选） timing-function（运动曲线-可选）

delay （何时开始可选） iteration-count（播放次数-可选） direction（是否反方向-可）

fill-mode; （动画位置起始或者结束;-可选）

二、定义动画

除了0和100%，还可以用from和to来表示序列

动画序列

1.可以做多个状态的关键帧

2.里面的百分比要是整数

3.里面的百分比是总的时间的划分，这里是2s

@keyframes move {
        /* 开始状态 */
        0% {
          transform: translate(0px, 0px);
        }
        25% {
          transform: translate(1000px, 0);
        }
        50% {
          transform: translate(1000px, 500px);
        }
        75% {
          transform: translate(0px, 500px);
        }
        /* 结束状态 */
        100% {
          transform: translate(0, 0);
        }
      }

三、调用动画

animation-name: move; （move即是动画名称，自己定义的名称）

animation-duration: 2s; （持续时间，指完成一次动画所需的时间，单位是秒-s）

animation-timing-function: linear; （运动曲线，属性值：

linear ：动画从头到尾的速度是相同的。

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in ：动画以低速开始。

ease-out：动画以低速结束。

ease-in-out：动画以低速开始和结束

cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中自己的值。（可能的值是从 0 到 1 的数值。）

steps()指定了时间函数中的间隔数量（步长，分几步一节一节的增长）

animation-delay: 1s; （何时开始，这里代表一秒后开始，默认是0；单位是秒s）

animation-iteration-count: 1; （循序次数，默认1；无限循环用属性值：infinite）

animation-direction: alternate; (是否为反方向播放，当播放次数在两次及以上的时候，下一次播放就会以上一次播放的路径沿着相反方向返回，默认是normal，反方向就写：alternate，)

animation-fill-mode: forwards; （规定动画结束时候的状态，是在起始的位置还是在最终的位置；回到起始状态：backwards（默认）；停留在结束状态：forwards）

可简写

animation: move 3s linear 1s 2 alternate forwards;

上面就表示：动画名称为move；持续3s；匀速播放；循环两次；第二次反方向回来；停留在结束位置；


      /* 定义动画 */
      @keyframes move {
        /* 开始状态 */
        0% {
          transform: translate(0px, 0px);
        }
        25% {
          transform: translate(1000px, 0);
        }
        50% {
          transform: translate(1000px, 500px);
        }
        75% {
          transform: translate(0px, 500px);
        }
        /* 结束状态 */
        100% {
          transform: translate(0, 0);
        }
      }
      .box {
        height: 200px;
        width: 200px;
        background-color: skyblue;   
        animation: move 5s steps(10) infinite alternate;
      }
      div:hover {
        /* 鼠标经过div就停止动画，running正在运行；paused暂停 */
        animation-play-state: paused;
      }

停止动画，一般搭配动作一起使用

animation-play-state: paused; （鼠标经过div就停止动画，running正在运行；paused暂停）

div:hover {
        /* 鼠标经过div就停止动画，running正在运行；paused暂停 */
        animation-play-state: paused;
      }