项目中需要使用到动画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. Webpack实战(八):教你搞懂webpack如果实现代码分片(code splitting)

    2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天.以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着 ...

  2. 【转载】wav文件格式分析与详解

    WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows 3.1操作系统上,文件扩展名为WAV,是WaveFom的简写,也称为波形文件,可直接存储声音波形, ...

  3. K8S 容器挂载Windows 文件共享目录,访问出现Permission denied的解决办法

    K8S Pod,Docker 容器挂载Windows主机目录,访问相应的文件出现Premission denied的权限访问问题 Windows远程共享目录为//192.168.61.115/huas ...

  4. linux--解决celery消息中间件带来的一系列问题

    启动celery定时任务 1.celery -A OpsManage beat -l info -S django 2.celery -A OpsManage worker -l info 此时消息中 ...

  5. JS中new的实现原理及重写

    提到new,肯定会和类和实例联系起来,如: function Func() { let x = 100; this.num = x + } let f = new Func(); 上面的代码,我们首先 ...

  6. 百度大脑EasyEdge端模型生成部署攻略

    EasyEdge是百度基于Paddle Mobile研发的端计算模型生成平台,能够帮助深度学习开发者将自建模型快速部署到设备端.只需上传模型,最快2分种即可生成端计算模型并获取SDK.本文介绍Easy ...

  7. Flink知识散点

    1.KeyBy 操作后,只有当 Key 的数量大于算子的并发实例数才能获得较好的计算性能. A.而若Key 的数量比实例数量少,就会导致部分实例收不到数据,这些实例就得不到执行,这些实例的计算能力得不 ...

  8. Spark组件间通信

    1.Spark组件之间使用RPC机制进行通信.RPC的客户端在本地编写并调用业务接口,接口在本地通过RPC框架的动态代理机制生成一个对应的实现类,在这个实现类中完成soket通信.远程调用等功能的逻辑 ...

  9. 搜索练习题LETTERS

    题目链接:http://ybt.ssoier.cn:8088/problem_show.php?pid=1212    或者http://poj.org/problem?id=1154 题目描述: 给 ...

  10. 【React Native】集成声网Agora语音通讯

    前言: 公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库. 集成iOS.And ...