HTML动画（难点）

animation-delay
这个属性是规定动画开始前等待几秒才开始。本来是很好理解的，但是当时就有个疑问：假如我的动画是连续执行好多次的情况下的话，是第一次执行前才会延迟还是每次执行前都会延迟呢？答案是：只有第一次会。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /><style type="text/css">@-webkit-keyframes delay{99%{-webkit-transform:translate(100px,0);}}.delay{width:100px;height:100px;background-color: #000;-webkit-animation:delay 1s linear 2s infinite;animation:delay 1s linear 2s infinite;}
</style>
</head>
<body><div class="delay"></div>
</body>
</html>

animation-fill-mode
该属性有四个值
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
一开始比较纠结着三个到底有什么区别。网上也找了，发现网上说的有点错误。起码我试了一下forwards和both的效果是一模一样的。都是动画运行完了停在哪里就是哪里。至于backwards，就是总停在一开始的状态。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /><style type="text/css">@-webkit-keyframes delay{100%{-webkit-transform:translate(100px,0);}}.delay{width:100px;height:100px;background-color: #000;-webkit-animation:delay 1s linear 2 forwards alternate;}
</style>
</head>
<body><div class="delay"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /><style type="text/css">@-webkit-keyframes delay{100%{-webkit-transform:translate(100px,0);}}.delay{width:100px;height:100px;background-color: #000;-webkit-animation:delay 1s linear 2 both alternate;}
</style>
</head>
<body><div class="delay"></div>
</body>
</html>

两段代码主要说明在forwards和both的情况下动画在设置了反向运行偶次数时，效果仍然一样。因为之前看到网上说的是forwards在偶次数反向是会停在关键帧的100%处，而不是0%处。
iteration-count
运行次数。
这个本来没什么好说的，一目了然，但是无意中发现，有以下的特殊情况：
不能为负数
可以为0 为0的时候，按1来算
可以为小数 小数的时候，不会取整。而是多少就运行多少，比如 .5 就运行到50%的位置。

转载于:https://www.cnblogs.com/beta-data/p/4491955.html

HTML动画（难点）相关推荐

Threejs围墙动画
Threejs围墙动画难点1: 根据顶点构建出来的围墙,默认是z轴朝上.假如模型是y轴朝上,则不好控制围墙的边界顶点. 这里的思路是把模型绕x轴翻转90度,然后根据rayser射线选取顶点.根据顶 ...
赵雅智：android教学大纲
带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中教学章节教学内容学时安排备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...
引导页就该这样设计！细数那些精彩纷呈的引导页面
随着苹果ios8的发布,可以看到App store货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师.市场宣传相继关注的焦点,产品宣传的下一轮引爆点.作为能在App store ...
苹果ppt_爆料！苹果9月16日发布会，iPhone 12新机提前感受！
# 9月16日·苹果秋季新品# 苹果新机大预告·一起爆料一起躁如题,相信很多朋友这几天在微信公众号刷的较多的就是一个消息: 苹果12要正式发布了 ,官方宣布北京时间9月16日凌晨1点线上直播. 作 ...
计算机视觉动画视频插帧难点、流程及改进
0 引言在动画行业中,动画视频是由专业动画师使用复杂的手绘图和精确的程序进行制作.手动绘制视频的每一帧都需要花费大量的时间,过高成本的同时无法产生令人满意的动画数据效果.本文结合Deep Anim ...
看动画轻松理解“递归”与“动态规划”
作者 | 程序员小吴来源 | 五分钟学算法在学习「数据结构和算法」的过程中,因为人习惯了平铺直叙的思维方式,所以「递归」与「动态规划」这种带循环概念(绕来绕去)的往往是相对比较难以理解的两个抽象知 ...
css动画使用背景图片卡顿_CSS入门学习笔记（二）：布局与定位
在CSS学习使用的过程中有一个方法可以检验出自己的错误,那就是border大法! 图片素材网站:wall haven: 透明属性:background-color:rgba(0,0,0,0.5) ba ...
android 星星流逝动画,Android Loading动画分析--续集
上一篇写了DayNightLoading的代码流程及关键类,今天周末好好分析一下其中computeRender(float renderProgress)与draw(Canvas canvas, Re ...
layui导入加载动画_厉害了！这个免费神器帮你无脑做施工动画
你好,这里是 BIMBOX.今天诚意给你安利一款好用免费的施工动画软件. 很多施工企业在建完模型后,都会用模拟动画的形式展示施工方案流程.做施工方案可视化评审.质量安全交底等.施工模拟动画这两年也成 ...

HTML动画（难点）

HTML动画（难点）相关推荐

最新文章

热门文章