应用视觉设计：「31」通过 CSS3 动画填充模式 animation-fill-mode 属性修改动画填充模式

路条编程 2020-09-16

737

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

今天我们要介绍的内容是通过 CSS3 动画填充模式 animation-fill-mode 属性修改动画填充模式。在上篇文章实现的圆形颜色转换的动画效果中，我们发现动画执行 5 秒后，圆形背景色又被重置成了初始背景颜色。如果我们希望动画结束后，保持结束状态的背景颜色如何实现呢？CSS3 中可以通过设置动画 animation-fill-mode 属性来完成此效果。该 animation-fill-mode 指定样式应用到一个元素时，动画结束后会保持结束状态的背景颜色。你可以通过以下方式进行设置

<style type="text/css">
animation-fill-mode: forwards;
</style>

animation-fill-mode 属性定义动画播放结束后、或被延迟播放期间，元素所应用的样式。可选值有 none 、 forwards 、 backwards 、 both ，默认值为 none。不同取值的含义如下所示：

属性值含义

none 始终应用默认样式，即页面初始加载完成后，还未进入迭代前的样式

backwards 表示后退，即后退到动画第一个迭代开始时的样式。被延迟的动画，延迟期间应用第一个迭代开始时的样式

forwards 表示前进，即前进到动画结束时的样式。被延迟的动画，延迟期间应用默认状态的样式；被播放的动画，播放结束后，应用结束状态的样式

both 同时遵循 forwards 和 backwards 的规则，在两个方向上扩展动画属性。即动画开始之前，应用 backwards 规则；动画结束之后，应用 forwards 规则

在文章 “应用视觉设计：「30」通过 CSS3 动画关键帧 @keyframes 属性实现动画效果” 代码基础上，更改圆形动画处于悬停状态背景颜色。使用 CSS3 @keyframes 更改元素将鼠标悬停在圆形上面时 background-color 变为 #09A7A1，同时应用动画填充模式为 animation-fill-mode: forwards。最终鼠标悬停时圆形背景色保持在 #09A7A1 颜色。具体代码如下所示：

<style type="text/css">


  .circle-div {
      height: 80px;
      width: 80px;
      background: #cecfd5;
      margin: 50px auto;
      border-radius: 50%;
    }


  .circle-div:hover {
      cursor: pointer;
      animation-name: animationBox;
      animation-duration: 5s;
      animation-fill-mode: forwards;
  }


  @keyframes animationBox {
      0% {
        background-color: #FF790E;
      }
      50% {
        background-color: #90c840;
      }


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

html 代码调整如下所示：

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

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

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

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

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

数据库

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

应用视觉设计：「31」通过 CSS3 动画填充模式 animation-fill-mode 属性修改动画填充模式

评论