CSS Houdini如何通过浏览器引擎实现复杂CSS动画效果？

本文共计5352个文字，预计阅读时间需要22分钟。

CSS的众多新特性从诞生到被浏览器普遍支持，经历了漫长的周期。CSS+Houdini开启了底层接口，让开发者直接触摸、开发原生的CSS效果，实现更复杂、流畅的效果和动画，无需等待。

CSS的任何新特性从诞生到被浏览器普遍支持，要经历漫长的周期，而CSS Houdini开放了底层接口，让开发者直接接触、开发原生的CSS效果，实现更为复杂、流畅的效果和动画，无需等待，快学起来吧！

vivo 互联网前端团队-Wei Xing

Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相关的浏览器API的总称。

一、Houdini 是什么

在了解之前，先来看一些Houdini能实现的效果吧：

反向的圆角效果（Border-radius)：

动态的球形背景（Backgrond）：

彩色边框（Border）：

神奇吧，要实现这些效果使用常规的CSS可没那么容易，但对CSS Houdini来说，却很easy，这些效果只是冰山一角，CSS Houdini能做的有更多。（这些案例均来自Google Chrome Labs，更多案例可以通过Houdini Samples查看）。

看完效果，再来说说Houdini到底是什么。