动画讲解—— CSS

最新推荐文章于 2024-05-23 22:54:35 发布

_洋

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量2.5k

点赞数

分类专栏： HTML+CSS 文章标签： css3

本文链接：https://blog.csdn.net/mantou_riji/article/details/124228642

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

动画概念
动画的设置——关键帧
练习
关键帧的复杂应用
- 小球的自由下落
- 小球的花样运动

动画概念

动画和过渡类似,都是可以实现一些动态的效果,
不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果。

动画的设置——关键帧

关键帧

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤。

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

animation-name

animation-name后面接的是关键帧的名字

animation-duration

animation-duration代表动画执行的时间

animation-delay

animation-delay代表动画的延时

animation-timing-function:

动画运动方式
可选值：

ease 默认值，慢速开始，先加速，再减速
linear匀速运动
ease-in加速运动
ease-out 减速运动
ease-in-out先加速后减速
cubic-bezier()：通过bezier曲线来指定时序函数，参数是两个点的坐标
网址：https://cubic-bezier.com
steps(n，t)分步执行过渡效果
n表示分几步执行完
t可以设置也可以不设置，表示的是如果10s执行完，分成5步，那么是应该在10/5 = 2s的什么位置开始执行。
- end ，在该段时间结束时执行过渡(默认值)
- start ，在该段时间开始时执行过渡

animation-iteration-count

动画执行的次数
可选值：

次数
infinite（无限执行）

animation-direction

指定动画运行的方向
可选值:

normal：默认值从from向 to运行，每次都是这样
reverse：从 to向 from运行，每次都是这样
alternate：从 from 向 to运行，重复执行动画时反向执行
alternate-reverse：从 to向from运行，重复执行动画时反向执行

animation-play-state

animation-play-state设置动画的执行状态可选值:

running：默认值动画执行
paused：动画暂停

animation-fill-mode

动画的填充模式
可选值:

none：默认值动画执行完毕元素回到原来位置
forwards：动画执行完毕元素会停止在动画结束的位置
backwards：动画延时等待时,元素就会处于开始位置（默认情况下延时等待时不发生变化，处于原来的位置，注意：静止时的位置不一定和开始时的位置一样）
both结合了forwards和 backwards，延时等待时，元素就会处于开始位置，最终会停在动画结束位置

属性简写：

规则：
只有一个要求，如果要写延迟，则两个时间中第一个是变换时间，第二个是延迟时间。
eg：

 animation: test 2s 2 1s alternate running;

练习

让哆啦A梦跑起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 180px;
            height: 229px;
            margin: 0 auto;
            background-image: url("./IMG/21.png");
            animation: run1 2s steps(6) infinite; 
        }
        @keyframes run1{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -1096px 0px;
            }
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    
</body>
</html>

在这里插入图片描述
原图：

关键帧的复杂应用

from和to之间还可以对动画的位置进行调整，用百分数表示调整的时间。
eg：

小球的自由下落

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .outer {
        height: 500px;
        border-bottom: 10px black solid;
        /* 防止地卖弄和小球一起移动 */
        overflow: hidden;
      }
      .outer div{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: coral;
        animation: ball 1s forwards ease-in;
        float: left;
      }
      @keyframes ball {
        from {
          margin-top: 0;
        }
        /* 落地 */
        20%,
        60%,
        to {
          margin-top: 400px;
          /* 落地之后的谈起是减速运动 */
          animation-timing-function: ease-out;
        }
        /* 弹起*/
        40% {
          margin-top: 200px;
          animation-timing-function: ease-in;
        }
        80% {
          margin-top: 300px;
          animation-timing-function: ease-in;
        }
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
    </div>
  </body>
</html>

输出：
在这里插入图片描述

小球的花样运动

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <style>
      .outer {
        height: 500px;
        border-bottom: 10px black solid;
        /* 防止地卖弄和小球一起移动 */
        overflow: hidden;
      }
      .outer div{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        /* background-color: coral; */
        animation: ball 1s forwards linear infinite alternate;
        float: left;
      }
      div.box1{
          background-color: rgb(228, 165, 177);
      }
      div.box2{
          background-color: rgb(245, 188, 237);
          animation-delay: .1s;
      }
      div.box3{
          background-color: rgb(213, 188, 245);
          animation-delay: .2s;
      }
      div.box4{
          background-color: rgb(188, 201, 245);
          animation-delay: .3s;
      }
      div.box5{
          background-color: rgb(188, 245, 233);
          animation-delay: .4s;
      }
      div.box6{
          background-color: rgb(239, 245, 188);
          animation-delay: .5s;
      }
      div.box7{
          background-color: rgb(245, 214, 188);
          animation-delay: .6s;
      }
      div.box8{
          background-color: rgb(245, 188, 188);
          animation-delay: .7s;
      }
      @keyframes ball {
        from {
          margin-top: 0;
        }
        to {
          margin-top: 400px;
        }
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
      <div class="box7"></div>
      <div class="box8"></div>
    </div>
  </body>
</html>

在这里插入图片描述

_洋

关注

0
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
动画讲解—— CSS

文章目录动画概念动画的设置——关键帧关键帧animation-nameanimation-durationanimation-delayanimation-timing-function:animation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode属性简写：练习关键帧的复杂应用小球的自由下落小球的花样运动动画概念动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触
复制链接

扫一扫