zoukankan      html  css  js  c++  java
  • css3 forwards、backwards、both

    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的时候,第一帧和最后一帧都保留;

  • 相关阅读:
    php魔术常量,_CLASS_,_METHOD_,_FUNCTION_
    php里parent,::和self的分别
    rewrite例子集合
    PHP中::、->;、self、$this操作符的区别
    php中const和define的区别
    aliyun二级域名绑定
    数组操作函数8
    http 301 和 302的区别
    lnmp引发的fpm502错误!
    关于php下开发的跨域问题总结(全)
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5194626.html
Copyright © 2011-2022 走看看