第十二讲_css动画

发布时间：2024年01月16日

css动画

1. 动画介绍

  • 动画使元素逐渐从一种样式变为另一种样式。
  • 使用 CSS 动画，您必须首先为动画指定一些关键帧。
  • 关键帧包含元素在特定时间所拥有的样式。

2. 动画的基本使用

2.1 定义关键帧（方式一）

使用关键字 from 和 to定义。

/* 定义动画 */
@keyframe 动画名 {
  /* 第一帧 */
  from {
    /* css属性设置 */
  }

  /* 最后一帧 */
  to {
    /* css属性设置 */
  }
}

2.2 定义关键帧（方式二）

使用百分比定义，可以设置更多的关键帧，让动画更加流畅和逼真。

/* 定义动画：方式二 */
@keyframe 动画名 {
  /* 第一帧 */
  0% {
    /* css属性设置 */
  }

  20% {
  }

  /* 最后一帧 */
  100% {
    /* css属性设置 */
  }
}

2.3 给元素使用动画

选择器 {
  /* 指定动画名 */
  animation-name: 动画名;
  /* 动画持续的时间 */
  animation-duration: 5s;
  /* 动画的延迟时间 */
  animation-delay: 1s;
}

3. 动画的其他属性

  • animation-timing-function：设置动画的速度曲线
  • animation-itaration-count：设置动画的次数
    • n：指定具体的次数，默认为1
    • infinite：无限次循环
  • animation-direction：设置动画的方向（动画次数为1，该属性无效）
    • normal：正常播放，默认值
    • alternate：轮流反向播放，在奇数次数正常播放，而在偶数次数向后播放
  • animation-fill-mode：设置动画在播放之前或之后，其动画效果是否可见
    • none：不改变默认行为
    • forwards：当动画完成后，保持最后一帧
    • backwards：在 animation-delay 所指定的一段时间内，显示第一个关键帧
    • both：forwards 和 backwards 都被应用
  • anamation-play-state：设置动画播放状态
    • paused：动画已暂停
    • running：动画正在播放

4. 动画示例

<html>
  <style>
    @keyframes animal {
      0% {
        height: 100px;
        width: 100px;
        background-color: pink;
      }

      50% {
        background-color: blue;
        transform: translateX(400px);
      }

      100% {
        transform: translateX(900px);
        background-color: blueviolet;
      }
    }

    .container {
      width: 1000px;
      height: 100px;
      border: 1px black solid;
    }

    .child {
      height: 100px;
      width: 100px;
      background-color: red;
      border-radius: 50px;
      /* 指定动画的名称 */
      animation-name: animal;
      /* 指定动画持续的时间 */
      animation-duration: 5s;
      /* 指定动画延迟的时间 */
      animation-delay: 1s;
      animation-fill-mode: both;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
   
  </style>

  <div class="container">
    <div class="child"></div>
  </div>

</html>

ps：运行代码，结合实际效果，更容易的掌握各个属性的作用，以及各个属性值的含义。

文章来源:https://blog.csdn.net/wenqi1992/article/details/135593685
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章