54. CSS3 animation-fill-mode属性设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:noneforwardsbackwordsboth。其四个属性值对应效果如下:

属性值 效果
none 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
forwards 表示动画在结束后继续应用最后的关键帧的位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwardsbackwards效果

在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

例如:让动画停在最一帧处。代码如下:

animation-fill-mode:forwards;

实例演示:

实现元素背景色从红色变成蓝色。

HTML代码:

<div></div>

CSS代码:

@keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  animation-name:redToBlue;
  animation-duration: 20s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-fill-mode: both; 
}

GIF效果如下:

CSS3 animation-fill-mode属性设置动画时间外属性

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 54. CSS3 animation-fill-mode属性设置动画时间外属性

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们