css3新特性第九章(动画)

于 2025-04-27 12:49:13 发布
阅读量689 收藏 26
点赞数 14
分类专栏： 前端基础 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36260963/article/details/147553379
版权

css3新特性第九章(动画)

动画基本简介

1.什么是帧

  • 一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续
    快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流
    畅。

2.什么是关键帧

  • 关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的 2-3 帧。

在这里插入图片描述

一、动画基本使用

  • 第一步需要定义关键帧
  • 给元素引用动画

关键帧定义方式

关键帧有两种方式，一种是通过关键字 from -> to这种方式 ，还有一种是 0% -》 100% 的方式，还有一种是混合，但是不推荐；

方式1

关键字 两个位置 from 相当于第一帧 to相当于是最后一帧

@keyframes moveright {

​ from {

​ }

​ to {

​ transform: translate(1100px);

​ }

}

第二步，应用上面的动画

.inner {

​ width: 100px;

​ height: 100px;

​ background-color: pink;

​ /* 定义动画名称 */

​ animation-name: moveright;

​ /* 设置动画所需时间 */

​ animation-duration: 3s;

​ /* 动画延迟 */

​ animation-delay: 0.2s;

}

在这里插入图片描述

方式2

使用数字值，百分比，列如 1%~100% 这种形式

@keyframes moveright2 {

​ 0% {

​ border-radius: 50%;

​ }

​ 10% {

​ background-color: aqua;

​ }

​ 50% {

​ background-color: yellow;

​ }

​ 80% {

​ background-color: green;

​ }

​ 100% {

​ background-color: purple;

​ transform: translate(1100px) rotate(360deg);

​ }

}

在这里插入图片描述

动画相关属性

  • animation-name ：给元素指定具体的动画（具体的关键帧）
  • animation-duration ：设置动画所需时间
  • animation-delay ：设置动画延迟

.box {
/* 指定动画 /
animation-name: testKey;
/ 设置动画所需时间 /
animation-duration: 5s;
/ 设置动画延迟 */
animation-delay: 0.5s;
}

二、动画其他属性

  • animation-timing-function ，设置动画的类型，常用值如下：
  1. ease ： 平滑动画 —— 默认值
  2. linear ： 线性过渡
  3. ease-in ： 慢 → 快
  4. ease-out ： 快 → 慢
  5. ease-in-out ： 慢 → 快 → 慢
  6. step-start ： 等同于 steps(1, start)
  7. step-end ： 等同于 steps(1, end)
  8. steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定
    函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间
    点。第二个参数默认值为 end 。
  9. cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。

该值跟过渡里面的参数相同，如果不了解请看过渡

animation-timing-function

steps

animation-timing-function ：steps（10） 一段一段往前窜的感觉，该方式可以应用在上传时候的进度条里面；

在这里插入图片描述

linear 匀速

animation-timing-function: linear;

在这里插入图片描述

animation-iteration-count

指定动画的播放次数

  • 具体的次数 如 animation-iteration-count: 3
  • 无限循环 infinite animation-iteration-count: infinite

animation-direction

指定动画方向，默认从左到右，我们可以改为从右到左

  1. normal ： 正常方向 (默认)
  2. reverse ： 反方向运行
  3. alternate ： 动画先正常运行再反方向运行，并持续交替运行
  4. alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行

animation-fill-mode

设置动画之外的状态，也就是动画停止后，是保持在那个状态，改状态下，如果设置了无限播放该属性就失效了。必须是有穷的次数才行。

  1. forwards ： 设置对象状态为动画结束时的状态
  2. backwards ： 设置对象状态为动画开始时的状态

animation-play-state

动画状态，我们可以将动画设置有运动或者停止

  1. running ： 运动 (默认)
  2. paused ： 暂停

.outer:hover .inner {

​ /* 动画状态 */

​ animation-play-state: paused;

}

代码

 <style>
     .outer {
       width: 1200px;
       height: 100px;
       border: 1px solid black;
     }

     /* 方式1 关键字 两个位置   from 相当于第一帧  to相当于是最后一帧 */
     @keyframes moveright {
        from {

        }
        to {
           transform: translate(1100px);
           border-radius: 50%;
           background-color: green;
        }
     }

     .inner {
       width: 100px;
       height: 100px;
       background-color: pink;
       /* 定义动画名称 */
       animation-name: moveright;
       /* 设置动画所需时间 */
       animation-duration: 3s;
       /* 动画延迟 */
       animation-delay: 0.2s;


       /* 其他属性 -动画方式 开始  */
       /* linear匀速 */
       /* animation-timing-function: linear; */

       /* steps 一段一段往前窜的感觉 */
       animation-timing-function: steps(20);

       /* 其他属性 -动画方式 结束 */


       /* 动画播放 的次数  具体次数或者 无限次 infinite*/
       /* animation-iteration-count: 3; */
       animation-iteration-count: infinite;

       /* 动画方向  0 -》100%  */
       /* normal 正常 从左道到右  */
       /* animation-direction: normal ; */
       /* 反转  reverse */
       /* animation-direction: reverse ; */
       /* 左右 */
       /* animation-direction: alternate-reverse; */
       /* alternate交替 如果只有一次该属性失效 */
       animation-direction: alternate ;



       /* 动画意外状态，不发生动画的时候，也就是停的时候 */
       
       /* 最后一帧出现的位置  forwards最后的位置 */
       animation-fill-mode: forwards;
     }

     .outer:hover .inner {
        /* 动画状态 */
        animation-play-state: paused;
     }

  </style>
</head>
<body>
   <div class="outer">
      <div class="inner"></div>
   </div>
</body>

三、动画复合属性

我们可以设置一个animation就可以完成多个分开写的属性合并起来；

  • animation: moveright 3s 0.3s linear 2 alternate-reverse forwards;

  • 只设置一个时间表示 duration ，设置两个时间分别是： duration 和 delay ，其他属性没有数量和
    顺序要求。

效果

在这里插入图片描述

代码

 <title>03.动画复合使用</title>
  <style>
     .outer {
       width: 1200px;
       height: 100px;
       border: 1px solid black;
     }

     /* 方式1 关键字 两个位置   from 相当于第一帧  to相当于是最后一帧 */
     @keyframes moveright {
        from {

        }
        to {
           transform: translate(1100px) rotate(360deg);
           border-radius: 50%;
           background-color: green;
        }
     }

     .inner {
       width: 100px;
       height: 100px;
       background-color: pink;
      
       /* 复合属性 */
       animation: moveright 3s 0.3s linear 2 alternate-reverse forwards;

     }

     .outer:hover .inner {
        /* 动画状态 */
        animation-play-state: paused;
     }

  </style>
</head>
<body>
   <div class="outer">
      <div class="inner"></div>
   </div>
</body>

四、动画与过渡的区别

  • 动画不需要触发时机，而过渡必须有一个触发的条件
  • 过渡如果实现动画的来回次数会很复杂

效果

在这里插入图片描述

代码

<title>04.动画与过渡区别</title>
  <style>
     .outer {
       width: 1000px;
       height: 200px;
       border: 1px solid black;
     }
     .box {
       width: 100px;
       height: 100px;
     }

     .box1 {
       background-color: palevioletred;
       transition: 3s 0.2s linear all;
     }

     .box2 {
       background-color: green;
       animation: moveRight 3s 0.2s linear;
     }

     /* 定义过渡 */
     .outer:hover .box1 {
       transform: translate(900px);
     }

     /* 定义动画 */
     @keyframes moveRight {
        from {

        }
        to {
          transform: translate(900px);
        }
     }



  </style>
</head>
<body>
    <div class="outer">
       <div class="box box1">我是过渡</div>
       <div class="box box2">我是动画</div>
    </div>
</body>

五、小案例

我们准备一张图片，然后使用动画实现人骑自行车的效果

效果

在这里插入图片描述

代码

 <title>05.动画骑自行车</title>
  <style>
     @keyframes backRun {
        from {

        }
        to {
           background-position: 0 -4030px;
        }
     }

     .box {
       width: 130px;
       height: 130px;
       margin: 0 auto;
       margin-top: 100px;
       background-image: url('./images/bike.png');

       /* 定义动画 */
       animation: backRun 1s steps(31) infinite;

     }


  </style>
</head>
<body>
    <div class="box"></div>
</body>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星空寻流年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值