css3动画

分享CSS3动画，CSS3手风琴，CSS3 animation、CSS3 transform和CSS3 transition等CSS3新技术

30 Seconds of CSS 精彩片段中文版

前端博客2018-10-13前端开发代码2372View0

30 seconds of css是跟30 seconds of code 类似的项目，翻译中文版已经很久了，今天列举几个自己觉得比较有用的片段，使用CSS3实现某些前端效果，还是挺炫酷的。

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

前端博客2017-11-03前端开发代码6879View0

在使用CSS3动画中，会有需要监听动画是否已经结束并对事件进行处理，最好的方法就是使用animationend。我们通过JavaScript来监听动画的开始、进行和结束，这样子方便我们随时控制运动中的元素。

CSS3 animation状态结束后可以通过animation-fill-mode 控制动画的最后状态，分别是不改变默认行为、保持最后一个属性和回到第一帧。

前端博客2017-05-26前端开发代码5933View0

《CSS揭秘》里面发现一个很独特的一个动画，使用纯CSS3动画让一个元素沿着环形路径运动。听起来有点不可思议，本文将带你一起走进作者的文章中，由复杂到简单，由多个结构到简单结构解剖CSS3语句实现环形运动。

一个使用伪元素来实现边框逐渐发光的过渡效果，主要用到scale和opacity这两个属性。

前端博客2017-03-31前端开发代码6712View0

这个CSS翻转卡片效果是在鼠标滑过上面的时候会有一个炫酷的旋转，显示下面的后面卡片，并且有发光的效果。下面分享一下这个代码：

2016-02-03前端开发754View0

今天在微博上分享了一篇关于“CSS3进度圆环”的做法，然后回来搜了一下，发现了这个比较给力的做法和解说。分享给大家：

前端博客2016-07-29前端开发资源1565View0

把这下面的50个有用的工具添加到你的web工具箱中。在合适的项目中使用合适的工具。

摘要：使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。以下为原文：CSS3硬件加速也有坑！！！常听人说：移动 ...