zoukankan      html  css  js  c++  java
  • CSS3 animation动画,循环间的延时执行该怎么弄

        在使用css做一些小的动画时,有些动画我们是需要其循环播放的,而且在部分动画中我们需要上一个循环与下一个循环之间存在一定的时间间隔,这个时候的animation-delay和transition-delay 只会在第一次动画开始的时候生效,而在两个循环之间是不生效的,这时我们就需要用其他的方法来实现循环之间的时间间隔。

       方法:如下面的程序,我们可以把动画执行的总时间设置为4s,然后设置动画从75%开始,用后面的1s来做动画,前面的3s用作每次动画开始之前的延时,这样就可以解决循环播放delay失效的问题。

    div{

          animation: move 4s ease infinite;

    }

    @keyframes move{

           /*  此处从75%开始 */

          75%{ transform: translateX(0px);}

          100%{ transform: translateX(100px);}

    }

  • 相关阅读:
    检测后缀表达式的合法性
    对表达式进行空白符预处理
    字符串替换
    中缀表达式的计算
    Linux shell编程
    Linux常用shell
    [转载]shell脚本编写规范
    [转载]Linux文件类型
    Linux的进程
    Linux进入命令行模式
  • 原文地址:https://www.cnblogs.com/hhhhhh/p/5758167.html
Copyright © 2011-2022 走看看