• css动画延迟好像有点怪


    项目中需要使用到动画animate.css,在自定义的时候发现设置animation-delay 和 animation-duration 的总时间不对会导致 动画缺失。
    比如 bounceInLeft 动画 是从左边出现然后 抖动一下 ,当初始animation-delay为0,animation-duration为1s,动画完整,但是如果设置,animation-delay 为1s,animation-duration 为2s动画就不完整了,具体的动画是延迟1s后,从左侧出现然后直接到达终点,但是并没有抖动。
    然后用w3c写了一个动画,发现确实是有点儿 问题,http://www.w3school.com.cn/tiy/t.asp?f=css3_animation4 就是这个demo,这种动画和一开始bounceInLeft 动画出现的结果不太一样。
    w3c的异常动画,按照我的理解 我动画设置时间为2s,假如总的路程是2m,那我不设置delay 速度应该是1m/s ,如果当我设置了delay为1s时,动画速度应该是2m/s才能在预定的时间完成动画。但是好像并不是这样,实时是我设置了delay为1s,动画速度还是1m/s,导致动画的duration其实不是2s了,这是w3c的那个动画,而到bounceInLeft 结果就是省略了一些动画在规定的时间内直接到达最终状态。
    所以如果准确的想完成延迟并且速度同样的情况下不能使用delay,也没准是我理解错了。

  • 相关阅读:
    Mybatis源码中最重要的几个类
    学习爬虫-运营商积分
    IntelliJ IDEA 最新版 2019.2.4 激活 (持续更新)(含windows和Mac)
    归并排序之求小和
    归并排序
    理解递归
    插入排序
    对数器
    冒泡排序
    mysql 数据库名称,中间带有中划线问题
  • 原文地址:https://www.cnblogs.com/aloneCode/p/9896421.html
Copyright © 2020-2023  润新知