项目中需要使用到动画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,也没准是我理解错了。

css动画延迟好像有点怪的更多相关文章

  1. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  2. 深入浅出 CSS 动画

    本文将比较全面细致的梳理一下 CSS 动画的方方面面,针对每个属性用法的讲解及进阶用法的示意,希望能成为一个比较好的从入门到进阶的教程. CSS 动画介绍及语法 首先,我们来简单介绍一下 CSS 动画 ...

  3. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  4. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  5. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  6. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  7. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  9. 这样使用 GPU 渲染 CSS 动画(转)

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

随机推荐

  1. 赛狗日源码分享 《Head First C#》第三版

    目录 前言 效果展示 步骤 熟读任务说明 搭界面 开始代码 From.cs Greyhound.cs Guy.cs Bet.cs 写在后面的话 本次遇见的一些问题 关于优化 可以设定狗的特性 去掉Be ...

  2. Python常用库 - os库

    os简单介绍 os 模块提供了非常丰富的方法用来处理文件和目录 os关于目录路径的方法 # 获取当前路径 path = os.getcwd() # 获取当前绝对路径 os.path.abspath(p ...

  3. 【转】netty-transport版本冲突

    Springboot整合Elasticsearch报错 今天使用SpringBoot整合Elasticsearch时候,相关的配置完成后,启动项目就报错了. nested exception is j ...

  4. ASP.NET Core Razor 视图预编译、动态编译

    0x01 前言 ASP.NET Core在默认发布情况下,会启动预编译将试图编译成xx.Views.dll,也许在视图中打算修改一处很细小的地方我们需要再重新编译视图进行发布.下面我将从 ASP.NE ...

  5. 与WinRT组件进行操作

    1,原理: WinRT是一个新的类库,应用程序可以用它访问操作系统的功能. 在内部,WinRT以组件的形式实现.COM Component Object Model- WinRT使用.net元数据来描 ...

  6. 使用C#的计时器加观察者模式完成报警推送需求

    前言 这两天面试了一个物联网公司高级研发,面试题是下面这样子 公司领导,部门主管,小组组长,组成员4级,假如有个 疫情预警,先通知组人员(对个人,主要有一个处理就算处理了) 如果3分钟没处理,就往组长 ...

  7. windows快捷键记录

    -1: 装完iis, run -> inetmgr 弹出iis管理器 0.按住Shift键右击鼠标打开命令行窗口 1.ODBC数据源管理器run->odbcad32 2.计算机管理(查看设 ...

  8. Apache Solr JMX服务远程代码执行漏洞复现

    0x00 漏洞介绍 该漏洞源于默认配置文件solr.in.sh中的ENABLE_REMOTE_JMX_OPTS配置选项存在安全风险. Apache Solr的8.1.1和8.2.0版本的自带配置文件s ...

  9. myeclipse 2018 intaslled jars JREs 选项区别,及注意事项

    Standard 1.1.x VM与Standard VM的区别 在Eclipse或MyEclipse中要设置Installed JREs时,有三个选择: - Execution Environmen ...

  10. VAR 学习笔记3

    脉冲响应图及方差分析 当使用VAR模型的时候需要完成: 选择合适的变量 就是研究变量这个没有疑问 判断滞后阶数 根据AIC和SC准则,选择 为何做格兰杰因果检验 如果给定 \(x_t\) 的滞后阶数, ...