0
点赞
收藏
分享

微信扫一扫

day02-移动web(动画)

炽凤亮尧 2022-04-26 阅读 63
css

动画

一、动画

  • 目标:使用animationt添加动画效果
  • 作用:实现多个状态的变化,并且过程可控(重复播放、交替播放、暂停)
  • css属性:animation
  • 快捷键:an

1.1 动画属性

  • 目标1:使用animation相关属性控制动画执行过程
    在这里插入图片描述
  • 目标2:使用steps实现逐帧动画
    在这里插入图片描述

1.2 动画实现步骤

使用步骤:

1. 定义动画

  • 写法:
    1. @keyframes 动画名称 { from{} to{}}
    2.👍: @keyframes 动画名称 { 0%{} 50%{} 100%{}}
    3. 快捷键: @key
    4. 区别:from to 只能定义两个状态的变化。百分比可以定义多个状态间的变化
    推荐👍:常省略from 和 0%

2. 调用动画

  • 写法:
    1.复合属性:animation: 动画名称 持续时间 延迟时间 速度曲线 最后的状态 重复次数 执行方法
    2.关键的单词:🔔
    infinite 无限次数播放
    alternate 交替播放
    infinite 重复次数
    linear 匀速播放
    steps(N) 逐帧动画,又叫分步动画,常和精灵图配合做逐帧动画
    forwards 停在最终的状态
    paused 暂停,常和hover配合做暂停动画

  • ✨注意事项:
    1. 复合属性的位置可以任意调换
    2. infinite (重复)和forward(停在最终状态)不能同时使用
    3. 动画名称、动画时长不能省略。其它的都可以省略
    4. 如果只有一个时间,表示动画时长;如果有两个时间,第一个表示(动画)持续时间,第二个代表延迟时间

  /* 目标:添加动画,让宽度从200变大到800 */
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 2. 使用动画 快捷an*/
      /* 动画时间不能省略,否则跑不起来 */
      animation: move 2s;
    }
    /* 1.定义动画 快捷键@key*/
    /* 中文也能跑,但是不推荐 写法很low*/
    @keyframes move {
      /* 定义初始状态 */
      from {
        width: 200px;
      }
      /* 定义最终状态 */
      to {
        width: 800px;
         background-color: pink;
      }
    }
  • 效果:
    在这里插入图片描述
    注意:默认动画后自动回到初始状态

1.3 动画实现步骤-百分比写法

  • 作用:可以定义多个状态的变化
  • 取值:百分比是按时间长度取值: 0-100可以任意分配值
  • 注意:
  1. 0%等同于from,代表初始状态
  2. 100%等同于to,代表最终状态
    /* 目标:添加动画,让宽度从200*100 到 500*300,再到 800*500 */
    /* 区别:1.  from 到同只能定义两种状态,2.  百分比可以自定义多种状态 */
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /*2.  使用动画 */
      animation: move 3s;
    }
    /* 1.定义动画 */
    @keyframes move {
      /* 0&等同于from 代表初始状态 */
      0% {
        width: 200px;
        height: 100px;
      }
      10% {
        width: 300px;
        height: 200px;
      }
      20% {
        width: 500px;
        height: 400px;
      }
      /* 百分比是按照时间长度取值的:0-100可以任意取值 */
      50% {
        width: 600px;
        height: 100px;
      }
      /* 100% 等同于to 代表最终状态 */
      100% {
        width: 100px;
        height: 50px;
      }
    }

1.4 使用动画的三个注意事项

  • 注意事项:
    1. 动画名称不能重复,否则会产生覆盖效果
    2. 大部分的CSS属性都可以 使用动画
    3. from与0%常常省略,代表从初始状态0%开始
 注意事项:
        1. 动画名称不能重复,佛否则会产生覆盖效果
        2. 大部分的CSS属性都可以 使用动画
        3. from与0%常常省略,代表从初始状态0%开始 -->
  <style>
    /* 目标:添加动画,让宽度从200变大到600 */
    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 2. 使用动画 快捷an*/
      /* 动画时间不能省略,否则跑不起来 */
      animation: move 2s;
    }
    /* 1.定义动画 快捷键@key*/
    /* 中文也能跑,但是不推荐 */
    @keyframes move {

      /* 写法一 可以定义多种状态,取值0-100*/
      0% {
        width: 200px;
        background-color: lime;
      }
      100% {
        width: 300px;
        background-color: orange;
      }
      /* 写法二 只能定义两种状态*/
      /* 定义初始状态 初始状态一般可以省略*/
      from {
        width: 200px;
        background-color: skyblue;
      }
      /* 定义最终状态 */
      to {
        width: 500px;
        height: 200px;
        background-color: pink;
        border-radius: 50%;
      }
    }

1.5 animation复合属性

  • ✨注意事项:
  1. 复合属性的位置可以任意调换
  2. 名称和持续事件,不可省略其它的都可以
  3. forwards 和 infinite不能同时使用
  4. 如果有两个时间,第一个代表持续时间,第二个代表延迟
  .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;
      /* 速度曲线:linear 代表匀速运动 */
      /*          steps(4) 代表分步变化 */
      /* 延迟时间:默认立即开始动画,延迟时间代表,多少秒后开始动画 */
      /* 重复次数:infinite 无限次数播放 */
      /* 动画方向: alternate 动画执行到100后,再从100%执行到0%。 */
      /* 最后的状态:forwards 停在最终的状态中 */

      animation: move 4s steps(4);


      /* 
        💥注意事项:
        1. 复合属性的位置可以任意调换
        2. 名称和持续事件,不可省略其它的都可以
        3. forwards 和 infinite不能同时使用
        4. 如果有两个时间,第一个代表持续时间,第二个代表延迟时间。如果只要一个时间,代表动画时长
      */
    }
    .box:hover {
      animation-play-state: paused;
    }

    @keyframes move {
      to {
        background-color: pink;
        border-radius: 50px;
        width: 800px;
        height: 500px;
      }
    }

1.6 精灵动画

注意:多个动画用同一个animation属性时,动画之间用逗号隔开即可

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      width: 140px;
      height: 140px;
      background: url(./images/bg.png) 0 0;

      /* 💥 多个动画用同一个animation,动画之间用逗号隔开即可 */
      animation: move 1s steps(12) infinite, run 2s linear forwards;
    }

    @keyframes move {
      to {
        /* background-position: -1680px 680px; */
        background-position: -1680px 0;
      }
    }

    @keyframes run {
      to {
        transform: translateX(800px);
        
      }
    }

1.7 精灵动画-效果

1.8 精灵动画-时钟效果

二、走马灯案例

总结

举报

相关推荐

day02-移动web

day02-编程题

JAVA学习打卡day02-语言概述

Day02-数组和字符串

day02-变量与运算符

web前端day02

0 条评论