# requestAnimationFrame简介 当我们需要实现动画时，最先想到的会是**setTimeout**和**setInterval**这两个函数。css3动画出来后，我们也可以使用css3来实现动画。然而这两种方法都有很大的局限性。 一般情况下，使用**setTimeout**和**s ...
分类：
其他好文 时间：
2017-04-05 12:54:48
阅读次数：
178
本文为转载文章，原文链接：http://www.cnblogs.com/starof/p/4968769.html 一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃 ...
分类：
Web程序 时间：
2017-04-02 16:25:25
阅读次数：
267
animation：通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称 规定动画的时长 @keyframes：请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 animation-duration：默认值是 0 2s ...
分类：
其他好文 时间：
2017-03-30 16:13:18
阅读次数：
325
CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获 ...
分类：
Web程序 时间：
2017-03-12 13:10:40
阅读次数：
159
@keyframes film_out{ from{ transform: scale3d(1,1,1) rotate(0); opacity: 1; } to{ transform: scale3d(0.7,0.7,0.7) rotate(90deg); opacity: 0; } } div { ...
分类：
Web程序 时间：
2017-03-09 12:55:38
阅读次数：
210
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transform的属性包括：rotate() / skew() / scale() / translate ...
分类：
Web程序 时间：
2017-03-01 19:32:19
阅读次数：
411
上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。 html 加入了css3动画loading效果； css js部分： 当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我 ...
分类：
其他好文 时间：
2017-02-21 16:51:38
阅读次数：
217
高性能 CSS3 动画 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画 ...
分类：
Web程序 时间：
2017-02-20 18:25:03
阅读次数：
300
实现如图所示的动画效果： 预载动画一：双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。实现如图所示： html代码： css代码： 预载动画二：交错圈 两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。效果： html代码： cs ...
分类：
Web程序 时间：
2017-02-17 09:49:13
阅读次数：
342
