css3 forwardsbackwardsboth

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 forwardsbackwardsboth相关的知识,希望对你有一定的参考价值。

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。

 

关于这三个,很好理解;具体请看demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    *{margin: 0; padding: 0;}
    .box{width: 100px; height: 100px; background: red; border-radius: 50%;  opacity: 0.5; animation: paly 2s linear backwards }
      @keyframes paly{
          0%{-webkit-transform: scale(0.5,0.5);
          -ms-transform: scale(0.5,0.5);
          -o-transform: scale(0.5,0.5);
          transform: scale(0.5,0.5);}
          100%{
              -webkit-transform:scale(0,0);
              -ms-transform:scale(0,0);
              -o-transform:scale(0,0);
              transform:scale(0,0);
          }
      }
    </style>
    
</head>
<body>
    <div class="box"></div>
</body>
</html>

这是一个大小匀速变化的圆,当animation的填充模式为backwards的时候,可以看到,小圆缩小后直至没有了,说明保持了最后一帧;当animation的填充模式为forwards的时候,则相反;当animation的填充模式为both的时候,第一帧和最后一帧都保留;

 

以上是关于css3 forwardsbackwardsboth的主要内容,如果未能解决你的问题,请参考以下文章

css3 文字梯形显示

CSS3 倒影

CSS3教程链接

CSS3

怎么用js触发css3动画

css3动画效果,如何设置呢?