使用 CSS 动画属性 animation-timing-function 控制动画元素在动画持续时间内变化的速度

路条编程 2020-09-19

1063

欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。

今天我们要介绍的内容是使用 CSS 动画属性 animation-timing-function 控制动画元素在动画持续时间内变化的速度。如果动画是圆形物体在 animation-duration 属性设定的时间内从 A 点移动到 B 点，animation-timing-function 属性则说明圆形物理在运动过程中如何加速和减速的。

animation-timing-function 属性有许多常用的预定义关键字。预定义关键字有 ease 、 linear 、 ease-in 、 ease-out 、 ease-in-out 、 step-start 、 step-end，默认值为 ease。各关键字的含义如下所示：

|关键字       |含义|
| ---        | --- |
| ease       | 逐渐变慢
| linear     | 匀速过渡
| ease-in    | 由慢到快
| ease-out   | 由快到慢
| ease-in-out| 由慢到快再到慢
| step-start | 一步到位,相当于steps(1, start) 
| step-end   | 延迟到位, 相当于steps(1, end)

在文章 “应用视觉设计：「33」通过 CSS 动画 animation-iteration-count 属性设置动画重复次数” 代码基础上，为了比较不同关键字的运动效果，我们需要增加一个圆形元素，通过两个圆形动画效果比较不同关键字的运动方式。在样式类 .circle-anim 最后增加 animation-timing-function: step-start ，表示动画从开始位置直接到结束方式运动。从样式类 .circle-anim 复制一个样式类 .circle-anim2，调整属性 animation-name 为 animationBox2， animation-timing-function 属性为 ease-out，表示动画由快到慢。调整样式如下所示：

<style type="text/css">
  .circle-anim {
      animation-name: animationBox;
      animation-duration: 5s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: step-start ;
  }


  .circle-anim2 {
      animation-name: animationBox2;
      animation-duration: 5s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: ease-out;
  }


  @keyframes animationBox {
      0% {
        background-color: #FF790E; 
        top: 0px;        
      }
      50% {
        background-color: #90c840;  
        top: 220px;    
        opacity: 0.1;
      }


      100% {
        background-color: #09A7A1;
        top: 0px;
      }
  }


  @keyframes animationBox2 {
      0% {
        background-color: #FF790E; 
        top: 0px;        
      }
      50% {
        background-color: #90c840;  
        top: 220px;    
        opacity: 0.1;
      }


      100% {
        background-color: #09A7A1;
        top: 0px;
      }
  }
</style>

调整的 html 代码如下所示：

<li>
  <img src="../images/balloon6.jpg" alt="hot air balloon" />
  <p>气球图片 6</p>
  <div class="div-skew">
    <div class="circle-div circle-anim"></div> 
    <div class="circle-div circle-anim2"></div>
  </div>
</li>

保存页面，大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，调整页面效果如下：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

使用 CSS 动画属性 animation-timing-function 控制动画元素在动画持续时间内变化的速度

评论