工作以来，处理过css、js、canvas、骨骼动画，这些背后的原理都是通过把每一帧（瞬间）的静止图像组合起来，以一定频率（速率）播放这些图像形成动画。 详细一点解析：动画可以拆分成每一帧，当前帧（静态）图像的属性数据或者形态（形状）的变更，把这样很多帧连贯起来，就形成动画。 …

在大多数需求中，css3 的 transition / animation 都能满足我们的需求，并且相对于 js 实现，可以大大提升我们的开发效率，降低开发成本。 它的值是一个数列，数与数之间用逗号或者空白隔开，指定短划线(50px)和缺口(50px)的长度。 设置 strok…

Three这个流行的库目前突破了56K Star，是创建一个易于使用，轻量级，3D库默认的WebGL渲染器。在示例中，该库还提供了画布2D、SVG和CSS3D渲染器。threejs可以将它理解成three + js，three表示3D的意思，js表示javascript的意思。…

这是一篇旧文，旧博客停用，文章迁移至掘金重新发出来。 开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是…

:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。 包裹在外的父元素div应该设置成inline-block，否则宽度会满屏。 span标签实现…

这是笔者整理的个人在CSS3动画上遇到的问题，全部都是笔者个人的经验，以及解决方案，并不相信网上会有重复的文章。大家可以点进每个小栏目的codeplay去地直观feel一下。 常见错误一：动画做完就disappear了！喂喂喂！没让你消失啊。code play~ 这个应该是an…

此次分享是一次自我组件开发的总结，还是有很多不足之处，望各位大大多提宝贵意见，互相学习交流。 1. 前置资源：抛物线运动的物理曲线需要使用Tween.js提供的速度函数 2. 粒子实现 希望在粒子管控组件时，使用new partical的方式创建粒子，每个粒子存在自己的动画开始…

在前端开发中经常需要一些过渡动画，可以借助SVG作为背景动画实现。

一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…