【CSS】动画-animation

芒果Cake

已于 2022-12-13 18:39:13 修改

阅读量170

点赞数

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

于 2022-12-01 21:03:48 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/128138755

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

- 动画

动画

定义关键帧1

语法：@keyframes 动画名字{
from{}
to{}
}

执行关键帧动画属性
animation:

绑定动画名字 animation-name: move;
动画的持续时间 animation-duration: 10s; 必写
必写动画的延迟时间 animation-delay: 2s;

<style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      margin: 50px auto;
    }
    .son {
      width: 300px;
      height: 200px;
      background-color: cyan;
      /* 02.执行动画 */
      animation-name: move;
      animation-duration: 5s;
      animation-delay: 1s;
    }
    /* 01.定义动画 */
    @keyframes move {

      /* 动画开始的时间 0% */
      from {
        transform: translate(200px);
        background-color: yellow;
      }

      /* 动画结束的时间 100% */
      to {
        transform: translate(400px);
        background-color: red;
      }
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>

💡执行结果截图
请添加图片描述

定义关键帧2

语法：@keyframes 动画名字{
百分比是时间的百分比]
0%{}
…
50%{}
…
100%{}
}

<style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      margin: 50px auto;
    }

    .son {
      width: 300px;
      height: 200px;
      background-color: cyan;
      /* 02.执行关键帧 */
      animation-name: move;
      animation-duration: 10s;
    }

    /* 01.定义关键帧 */
    @keyframes move {
      0% {
        transform: translate(300px);
      }

      30% {
        transform: translate(600px);
      }

      50% {
        transform: translate(600px, 600px);
      }

      100% {
        transform: translate(300px, 600px);
      }
    }
  </style>

动画属性1
animation

animation-name 绑定动画名字必须写
animation-duration 动画的持续时间必须写 s ms
animation-delay 动画的延迟时间
animation-timing-function 动画的运动状态
- 匀速 linear
- 默认 ease
animation-iteration-count 动画的执行次数
- 1(默认) 2 3 4
- infinite 无数次
animation-direction 动画的方向
- normal 默认正向
- reverse 反向
- alternate 先正后反（执行次数必须大于等于2）
- alternate-reverse 先反后正（执行次数必须大于等于2）

<style>
    .box {
      width: 100px;
      height: 100px;
      background-color: cyan;
      margin: 300px auto;
      /* 02.执行动画 */
      /* 绑定动画的名字 */
      animation-name: move;
      /* 动画的持续时间 */
      animation-duration: 3s;
      /* 动画的运动状态 */
      animation-timing-function: linear;
      /* 动画执行次数 */
      animation-iteration-count: 3;
      /* 无数次 */
      /* animation-iteration-count: infinite; */
      /* 动画的执行方向 */
      /* 反向 */
      animation-direction: reverse;
      /* 先正后反 执行次数至少两次以上 */
      animation-direction: alternate;
      /* 先反后正 执行次数至少两次以上*/
      animation-direction: alternate-reverse;
    }

    /* 01.定义动画 */
    @keyframes move {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(2);
      }

      100% {
        transform: scale(3);
      }
    }
</style>

小球动画练习案例

<style>
        .box1 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: skyblue;
            /*  */
            animation-name: move;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }


        @keyframes move {
            0% {
                transform: translate();
            }


            50% {
                transform: translate(200px, 200px);
            }


            100% {
                transform: translate(400px);
            }
        }


        .box2 {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: pink;
            /*  */
            animation-name: move2;
            animation-duration: 2.5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }


        @keyframes move2 {
            0% {
                transform: translate();
            }


            50% {
                transform: translate(150px, 200px);
            }


            100% {
                transform: translate(350px);
            }
        }


        .box3 {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: green;
            /*  */
            animation-name: move3;
            animation-duration: 1.5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }


        @keyframes move3 {
            0% {
                transform: translate(0);
            }


            50% {
                transform: translate(120px, 180px);
            }


            100% {
                transform: translate(320px);
            }
        }


        .box4 {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: orange;
            /*  */
            animation-name: move4;
            animation-duration: 1.2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }


        @keyframes move4 {
            0% {
                transform: translate();
            }


            50% {
                transform: translate(100px, 190px);
            }


            100% {
                transform: translate(330px);
            }
        }
    </style>

💡执行结果截图
请添加图片描述

动画的属性2

animation

animation-fill-mode 动画时间之外的状态

  backwards  开始的时候停在第一帧

  forwards  结束的时候停在最后一帧

  both  动画延迟停在第一帧，动画结束停在最后一帧

![image.png](https://img-blog.csdnimg.cn/img_convert/ecf141eb51e94cce7f615bc1b646c3b8.png#averageHue=#adb290&clientId=u32398ccb-6b79-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=233&id=ud91637e3&margin=[object Object]&name=image.png&originHeight=408&originWidth=944&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2530&status=done&style=none&taskId=u6d55947b-819d-42ce-9aa1-803175c5dc7&title=&width=539.4285714285714)

动画的简写

 animation:名字 持续时间 延迟时间 运动状态 次数 方向 时间之外的状态;

名字和持续时间必须写
没有先后顺序的
持续时间和延迟时间有先后顺序，持续时间在前
时间必须写单位 0s
动画名字严格区分大小写的，避免写关键词
不写的属性值取默认值

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 02.执行动画 */
      animation: move 2s infinite linear alternate;
    }
  </style>

过渡与动画的区别

```
 相同点:
```
- 都是对时间进行改变
```
 不同点:
```
- 过渡是主动触发，动画自动触发
- 过渡只有一次，动画可以多次或者无数次
- 过渡不能对属性进行精准的控制，动画可以

动画属性总结

动画总结
     定义关键帧
      @keyframes 动画名字{
        from{}
        to{}
      }
      @keyframes 动画名字{
        0%{}
        100%{}
      }
     执行关键帧  动画属性 animation
      animation-name 绑定动画名字 必须写
      animation-duration 动画的持续时间 必须写
      animation-delay 动画的延迟时间 
      animation-iteration-count 动画的执行次数
                      数字  1 (默认) 2  3 4 ...
                      关键词 infinite 无数次
      animation-direction 动画的方向
                      normal 默认 正向
                      reverse 反向
                      alternate 先正后反 执行次数>=2
                      alternate-reverse 先反后正 执行次数>=2
      animation-timing-function 动画的运动状态
                     ease 默认 先快后慢
                     ease-in
                     ease-out
                     ease-in-out 
                     linear 匀速
                     贝塞尔曲线
      animation-play-state 动画的执行状态
                    running 默认 运动
                    paused 暂停
      动画的简写
         -名字和持续时间必须写
         -持续时间和延迟时间有先后顺序
         -名字严格区分大小写的
         -时间必须写单位 0s
       animation:running 3s infinite move;