• CSS3 animation动画,循环间的延时执行时间


    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的。

    .item{
      webkit-animation: revolving 1s 3s infinite;
      animation: revolving 1s 3s infinite;
    }
    @-webkit-keyframes revolving{
      0%{
        -webkit-transform: perspective(700px) rotateX(90deg);
      }
      50%{
        -webkit-transform: perspective(700px) rotateX(0deg);
      }
      100%{
        -webkit-transform: perspective(700px) rotateX(-90deg);
      }
    }
    把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了。

    .item
    { webkit-animation: revolving 4s 0s infinite; animation: revolving 4s 0s infinite; } @-webkit-keyframes revolving{ 0,75%{ -webkit-transform: perspective(700px) rotateX(90deg); } 87.5%{ -webkit-transform: perspective(700px) rotateX(0deg); } 100%{ -webkit-transform: perspective(700px) rotateX(-90deg); } }
  • 相关阅读:
    MySQL安装图解
    程序员感触
    一个人的生活
    开始懂了
    limit 检索记录行
    Ajax的完整兼容各种浏览器版本代码
    java.lang.UnsupportedClassVersionError: Unsupported major.minor version 49.0的错误 [转]
    通信协议
    SDK
    毕业三个多月的感悟
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/6498031.html
Copyright © 2020-2023  润新知