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%的位置。
HTML动画(难点)的更多相关文章
- 亮相SIGGRAPH 太极拳三维教学App制作揭秘
http://news.hxsd.com/CG-animation/201208/663303.html 编者按:<My Tai Chi>是一系列基于移动平台的三维互动产品,由北京七星汇工 ...
- 赵雅智:android教学大纲
带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中 教学章节 教学内容 学时安排 备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...
- 简单的转盘抽奖——CSS动画优化
前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
- 【WP 8.1开发】如何动态生成Gif动画
相信如何为gif文件编码,很多朋友都会,而难点在于怎么让GIF文件中的帧动起来,也就是创建gif动画. Gif文件编码方法 先简单介绍一下编码的方法. 1.调用BitmapEncoder.Create ...
- iOS歌词逐渐变色动画
实现歌词逐渐变色的动画,像卡拉OK一样可以根据时间进度来染色.效果如图: 因项目需求要实现一个类似歌词逐渐变色的效果,自己想来想去想不出来实现方案,还是得求助万能的google, 最终是找到了这篇 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- iOS开发 QQ粘性动画效果
QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00 博客园精华区 原文 http://www.cnblogs.com/ziyi--caolu/p/5195615.ht ...
- 第4章 jQuery的事件和动画(二)
二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...
随机推荐
- storyboard和xib的区别
storyboard只是算是帮你布局,流程什么的,xib的另一种形势,比xib功能多,但是和分享完全没有半点关系 你暂时可以理解为高级xib
- BIOS讲解
首先 BIOS其实没什么神奇的 就是 Bisic input/output System,所以基本输入输出系统是一块装入了启动和自检程序的EPROM或EEPROM集成块,实际上它是被固化在计算机R ...
- [每日一题JS] 正则表达式
判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /\b[a-zA-Z]{1}[a-zA-Z0-9_]{4,19}\b/; var fl ...
- flex
http://www.w3.org/html/ig/zh/wiki/Css3-flexbox https://developer.mozilla.org/zh-CN/docs/CSS/CSS_Refe ...
- Powershell Switch 条件
Powershell Switch 条件 6 21 1月, 2012 在 Powershell tagged Powershell教程/ 分支/ 字符串/ 数字/ 条件by Mooser Lee 本 ...
- redis 验证消息队列也是写磁盘的
# 下面的例子将会进行把数据写入磁盘的操作: # 900秒(15分钟)之后,且至少1次变更 # 300秒(5分钟)之后,且至少10次变更 # 60秒之后,且至少10000次变更 # # 注意:你要想不 ...
- bzoj4003
http://www.lydsy.com/JudgeOnline/problem.php?id=4003 可合并堆. 每个点都有一个小根堆,记住可以到这个点的骑士有哪些,以战斗力为关键字. 从底层到顶 ...
- C++链接器工具错误:LNK2001, LNK2019(转载)
这是归属于链接器工具错误 这一类. 无法解析的外部符号“symbol” 代码引用了链接器无法在库和对象文件中找到的内容(如函数.变量或标签). 可能的原因 代码请求的内容不存在(例如,符号拼写错误或使 ...
- JS控制菜单样式切换
$('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...
- HTML5的local storage存储的数据到底存到哪去了
原文地址:http://zhidao.baidu.com/link?url=m6p5MLv0R46lDCd_Vnrry4XOMbdCwgV5fzs3tj5Jeyht1nPkAZ9OrO23njYBY1 ...