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,也没准是我理解错了。
css动画延迟好像有点怪的更多相关文章
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- 深入浅出 CSS 动画
本文将比较全面细致的梳理一下 CSS 动画的方方面面,针对每个属性用法的讲解及进阶用法的示意,希望能成为一个比较好的从入门到进阶的教程. CSS 动画介绍及语法 首先,我们来简单介绍一下 CSS 动画 ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- css动画-animation各个属性详解(转)
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- 【CSS】css动画及过渡和变换属性
1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...
- 这样使用 GPU 渲染 CSS 动画(转)
大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...
随机推荐
- Day17-18前端学习之路——常用语句资料库
一.var 与 let 的区别 var: 可以先初始化再声明该变量; 可以根据需要多次声明相同名称的变量 var myName = 'Chris'; var myName = 'Bob'; let m ...
- 【题解】 2月19日 厦门双十中学NOIP2014模拟D2 T2 采药人接水果
[问题描述] 采药人虽然 AFO(SU),但他在闲暇的时候还是可以玩一玩接水果(cat)的.但他渐渐发现 cat 好像有点太弱智.于是他不想浪费他的智商,于是决定写一个程序帮他玩. cat 是这样玩的 ...
- SAP 序列号与库存关联起来?
SAP 序列号与库存关联起来? SAP系统标准功能可以实现序列号管理.其系统配置也不复杂,但是不少企业却使用不起来.笔者参与的诸多项目里,只有现在所在的项目里有启用序列号管理.基于项目客户所在行业,以 ...
- 14.Android-使用sendMessage线程之间通信
1.Handler介绍 Handler 是一个消息分发对象.handler是Android给我们提供用来更新UI的一套机制,也是一套消息处理机制,通过它可以实现在不同线程之间传递消息 本章Handle ...
- Umi 小白纪实(三)—— 震惊!路由竟然如此强大!
在<Umi 小白纪实(一)>中有提到过简单的路由配置和使用,但这只是冰山一角 借用一句广告词,Umi 路由的能量,超乎你的想象 一.基本用法 Umi 的路由根结点是全局 layout s ...
- Linux 防SSH暴力攻击
在下这几天发现我的VPS 总是莫名遭受到 江苏镇江那边的IP 登录请求攻击 ,跟踪了下路由,发现ip是从蒙古那边出去的,然后意识到可能是有扫描端口的.. 方法一: 现在的互联网非常不安全,很多人没事就 ...
- 菜鸟linux
//查看系统中文件的使用情况 df -h //查看当前目录下各个文件及目录占用空间大小 du -sh *//查看当期端口使用情况netstat -tlpn //find命令详见--https://ww ...
- 清北学堂—2020.1提高储备营—Day 3(图论初步(一))
qbxt Day 3 --2020.1.19 济南 主讲:李奥 目录一览 1.图论(图.图的存储方式.最小生成树的定义) 总知识点:图论 前言:众所周知,图论是一个非常重要的部分,而这次集训也可以算从 ...
- 关于map 的几种方式
java为数据结构中的映射定义了一个接口java.util.Map;它有四个实现类,分别是==HashMap Hashtable LinkedHashMap 和TreeMap.== Map主要用于存储 ...
- Photoshop Elements2020强势来袭,教你三秒钟拯救闭眼照
Photoshop Elements2020强势来袭,一系列的黑科技让设计师和路人都惊叹不已!若某人的闭眼成为一张集体照的败笔,那该如何挽回? 想要挽救闭眼照?听起来很高大上,很困难?不,Photos ...