浏览器在某些属性上绘制的开销要高于其他属性。例如，任何涉及模糊处理的内容（例如阴影）的绘制时间要比绘制红色框的时间长。在 CSS 中，这些差异并不总是很明显，但浏览器开发者工具可以帮助您确定需要重新绘制的区域，以及其他与绘制相关的性能问题。

如果任何动画触发了绘制和/或布局，则需要主线程执行工作。 这一点对 CSS 和 JavaScript 动画而言都是如此，布局或绘制的开销可能会使与 CSS 或 JavaScript 执行相关的任何工作变得轻而易举，使问题变得毫无意义。

制作此动画所涉及的工作是确定合适的时间，以创造转动和脉冲的效果。动画本身非常简单，使用效果非常好的方法

您可以通过以下几种方法设置元素边框：border、outline 和 box-shadow，每种方法都有自己的优缺点，尤其是在为边框添加动画效果时。不使用适当 CSS border 的主要原因是出于动画目的。

快速 CSS 技巧！一个动画加载 loading，请注意使用 steps(var(–count)) 以实现正确的效果 ✨

我们使用限定范围的自定义属性和背景剪辑来制作动画渐变文本效果

在 CSS 网格中，您可以使用 grid-template-columns 和 grid-template-rows 属性分别定义线条名称，并跟踪网格列和行的大小。

这些功能包括能够轻松为进入和退出动画添加动画效果，以及针对可关闭的元素（例如对话框和弹出式窗口）顺畅地从顶层添加动画效果。

由于 CSS 一直以来都不允许动画调整为 height: auto;，因此我们不得不使用 JavaScript 来测量内容的高度，并根据该像素值调整动画。当calc-size() 函数功能在浏览器中出现时，我们就可以这样实现了

在着色器程序和其他各种程序中，使用时间来制作动画非常常见。CSS 无法像 JavaScript 那样启动计时器，但现在可以通过 CSS Houdini API 定义一个自定义变量，以毫秒为单位跟踪时间。

纯文本，纯CSS，简单干净的CSS动画，使用方便，完全可以替代图形进度条，加载等待git动图等

用css3 给checkbox添加动画特效，当用户点击时，它们会表现的像个小动物

用纯CSS绘制美国动画片《辛普森一家》中的各种人物

简单来说，CSS中的cubic-bezier()，就是一个用来创建过渡效果的timing function。它可以定义过渡的速度和其他一些指标，它也可以用来创建动画中的反弹特效。

使用motion path，作者可以让图像物体按照指定的路径运动。谷歌浏览器积极的要实现这个CSS特征，我想主要motion-path是SVG动画里独特的亮点，而谷歌浏览器已经决定放弃SVG SMIL，所以，实现了CSS中的motion-path，也就能很好的说服哪些喜欢SVG动画的用户了。

CSS中的 animation 属性可以让很多其它CSS属性产生动画效果，比如color, background-color, height， width等。当然，你需要为每个动画定义@keyframes CSS规则，animation需要调用这些@keyframes产生动画效果

在CSS动画中，使用Transition技术是一种“隐式”的动画方法，而相对应的，还有一种“显式”的动画技术，就是，你可以在CSS里直接指定动画效果，这需要使用keyframes属性了。

CSS中最简单的动画叫做 transition(转变)。Transition(转变)能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

这是一个自我实现的css绘图脚本，页面自己每跳出一行代码，都会即时作用到页面上，展示出这行代码的实际作用，于是，我们就看到了一个鲜红的跳动的心就一步一步的呈现在读者面前。

这是一个能方便的找到CSS动画制作的代码片段的地方。

下面展示的是一批完全只用CSS制作的加载等待动画效果。每个动画只运用了简单的css属性，没有任何繁重的渲染动作和布局计算，都是非常轻量级的代码。

这个里面里你能看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品，用鼠标移动到CSS代码上，你能看的这段代码绘制的相应的字母局部。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。

首先你需要相信的是，下面的这个会跳舞的树是用纯HTML5和CSS3实现的，没有用任何的SVG、flash、JavaScript等技术，就是html和css。相信这会让你觉得不可思议，是的，难以相信。首先这棵树明显是个递归结构，需要用的数学上的算法，然后这棵树在跳舞时(摆动)，树枝上下摆动和左右摇晃的节奏并不同步，带有一种自然的随意和协调性。看起来很美。

在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。
当开发完成后，我发现了这个很酷的jQuery plugin(由@jackrugile开发)。
于是我就开始思考，我应该做出这个小的CSS project。

最近我学到了一种很酷的技术，使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道，年轻时候我非常痴迷《街头霸王》游戏，而当我看到了这个素材….你知道我的脑子里想到了什么吗？

我曾在Addy Osmani的博客里看到过这种效果。这种当鼠标悬停时光泽一闪而过。十分的简单，但非常的漂亮。在重新设计网站版面时，我很想在我的logo上使用这种效果。只需要两个HTML元素和一个CSS变换，我就能创造出我自己的闪光效果。让我们来实现它！

进入2014年后，我们这些Web开发者开始慢慢发现需要面对一种困难，就是传统的JavaScript技术开始失效。很多年来我们一直依赖的那些JavaScript技巧技术，在如今CSS3兴起的情况下，很多的特效被浏览器内置的CSS功能替代。以前我们一直需要的一个功能——JS动画中结束时会触发回调函数——现在改用CSS动画后，如何触发这些回调动作？

CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。

背景动画如果用的恰当，会给网页带来意想不到的效果。在过去，我们只能用flash或Javascript来实现。幸运的是，CSS3的流行使得我们完全可以使用它来实现这种效果，不在依赖其它编程技术。一段简单的CSS代码就能轻而易举的达到下面的效果。

如何用纯CSS画出一个三角形图案 假设这有一个方块。 方块有一个上边框。 还有其它三个边。 注意这些边框在方块 […]

提示：点击清空画面。  

慢悠悠的云

请阅读详解用CSS绘制3D旋转立方体 下面的旋转立方体是不是非常的帅呆了！ 横向旋转立方体 前 后 上 bot […]