项目中需要使用到动画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. Day17-18前端学习之路——常用语句资料库

    一.var 与 let 的区别 var: 可以先初始化再声明该变量; 可以根据需要多次声明相同名称的变量 var myName = 'Chris'; var myName = 'Bob'; let m ...

  2. 【题解】 2月19日 厦门双十中学NOIP2014模拟D2 T2 采药人接水果

    [问题描述] 采药人虽然 AFO(SU),但他在闲暇的时候还是可以玩一玩接水果(cat)的.但他渐渐发现 cat 好像有点太弱智.于是他不想浪费他的智商,于是决定写一个程序帮他玩. cat 是这样玩的 ...

  3. SAP 序列号与库存关联起来?

    SAP 序列号与库存关联起来? SAP系统标准功能可以实现序列号管理.其系统配置也不复杂,但是不少企业却使用不起来.笔者参与的诸多项目里,只有现在所在的项目里有启用序列号管理.基于项目客户所在行业,以 ...

  4. 14.Android-使用sendMessage线程之间通信

    1.Handler介绍 Handler 是一个消息分发对象.handler是Android给我们提供用来更新UI的一套机制,也是一套消息处理机制,通过它可以实现在不同线程之间传递消息 本章Handle ...

  5. Umi 小白纪实(三)—— 震惊!路由竟然如此强大!

    在<Umi 小白纪实(一)>中有提到过简单的路由配置和使用,但这只是冰山一角 借用一句广告词,Umi 路由的能量,超乎你的想象 一.基本用法 Umi 的路由根结点是全局 layout  s ...

  6. Linux 防SSH暴力攻击

    在下这几天发现我的VPS 总是莫名遭受到 江苏镇江那边的IP 登录请求攻击 ,跟踪了下路由,发现ip是从蒙古那边出去的,然后意识到可能是有扫描端口的.. 方法一: 现在的互联网非常不安全,很多人没事就 ...

  7. 菜鸟linux

    //查看系统中文件的使用情况 df -h //查看当前目录下各个文件及目录占用空间大小 du -sh *//查看当期端口使用情况netstat -tlpn //find命令详见--https://ww ...

  8. 清北学堂—2020.1提高储备营—Day 3(图论初步(一))

    qbxt Day 3 --2020.1.19 济南 主讲:李奥 目录一览 1.图论(图.图的存储方式.最小生成树的定义) 总知识点:图论 前言:众所周知,图论是一个非常重要的部分,而这次集训也可以算从 ...

  9. 关于map 的几种方式

    java为数据结构中的映射定义了一个接口java.util.Map;它有四个实现类,分别是==HashMap Hashtable LinkedHashMap 和TreeMap.== Map主要用于存储 ...

  10. Photoshop Elements2020强势来袭,教你三秒钟拯救闭眼照

    Photoshop Elements2020强势来袭,一系列的黑科技让设计师和路人都惊叹不已!若某人的闭眼成为一张集体照的败笔,那该如何挽回? 想要挽救闭眼照?听起来很高大上,很困难?不,Photos ...