js动画和css3动画_CSS3动画：您要避免的打ic和错误

daique1908

关注

翻译最新推荐文章于 2026-09-19 16:31:19 发布 279 阅读 AI 写同款· GEO 优化 ›

js动画和css3动画

CSS3动画非常酷。它使我们能够为以前乏味的网站提供硬件加速的使用寿命。但是，您应该注意一些主要的陷阱和做法-让我们深入研究。

浏览器对CSS3动画的支持正在升温-Mozilla Firefox已加入WebKit的全面支持，而Internet Explorer 10和Opera 12承诺将来会提供支持。这意味着我们今天就可以开始使用它们而不必担心。但是，这种蓬勃发展的支持并非没有问题。

不是我们要找的Android

作为Webkit的先驱者，您希望CSS动画在所有Webkit浏览器中具有完全的支持。不幸的是，它并不是那么简单。内置Android设备的浏览器不支持动画-在一定程度上。问题是，它将仅支持具有单个更改属性的动画。

假设我们要与我的动画框架Animate.css一起使用，以打造一个超酷的网站。大多数动画，例如bounceInLeft，都可以在最新的Chrome，Safari，Firefox和iOS Safari上很好地工作。但是在Android设备上，用户将看不到单个动画元素。动画会运行，但是元素一旦完成就消失。

这个奇怪的怪癖意味着我们只能在Android设备上运行的动画是单属性动画，例如fadeIn和bounce。不幸的是，目前尚不清楚Android 4.0是否会提供更好的支持-希望会。

在我们看到这些Android设备提供更大的支持之前，您最好的选择是提供Javascript后备广告或不太复杂的动画。但是，如何告诉您的网站不要在这些设备上使用超酷的动画呢？使用Modernizr在这里无济于事-它会检测到浏览器支持动画。幸运的是，我们可以检查用户代理，并提供其他样式表或脚本。在PHP中，就像这样简单：

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
	$css = "droid-style.css";
} else {
	$css = "style.css";
}

该代码段将在Android设备上加载droid-style.css ，这意味着我们可以为使用它们的浏览器保留精美的裤子动画。优秀的！

对于2D，请按3D

iPhone和iPad等iOS设备对CSS3动画有很好的支持，并具有完整的硬件加速功能-但前提是它是3D转换。如果动画不涉及3D转换，则软件将完全对其进行加速，这可能会导致动画滞后。

要获得动画的完整硬件加速，您需要激活3D渲染引擎。就像将此规则添加到CSS一样简单：

.container {
    -webkit-transform: translateZ(0);
}

大！但是，为什么不将此规则应用于body呢？好吧，由于某种原因，激活3D引擎会稍微影响页面的布局。固定或绝对定位的元素在应用到身体时会略有偏移。

就像CSS3世界中的所有事物一样，这种巧妙的技巧是有代价的。这不是一个沉重的负担，但是却要付出代价。看一下这种科学的比较：

它需要敏锐的眼睛才能看到，但是激活3D渲染引擎可以对文本灰度进行抗锯齿处理-这样可以使文本稍微清晰一些，在非常小的或非常大的文本尺寸上尤其明显。就像我说的，这没什么大不了的，但这仍然是一个错误。添加-webkit-font-smoothing: antialiased; 可以稍微减轻Webkit浏览器上的问题。

转换问题

假设您需要将元素从一个位置移动到另一个位置，而又不影响页面的布局。 translate在这里你最好的朋友-在翻译属性，由W3C定义：

...不会影响已转换元素周围内容的流动。但是，溢出区域的值将转换后的元素考虑在内。

看到那个吗？它不会影响周围内容的流向。但这确实会影响文档的溢出。这意味着，如果将元素移出页面（这是Animate.css上的一些动画的情况），它将导致滚动条。

浏览器对这种行为的处理略有不同。 Safari和Chrome将创建滚动条，但是一旦转换完成并且元素的不透明度降至零，它将删除滚动条，就好像该元素已被删除一样。另一方面，Firefox创建永久滚动条，这些滚动条将一直保留到从文档中删除元素或将其设置为display: none为止。处理这些转换的最佳方法是使用一点Javascript魔术。如果您知道动画的长度，则应在完成动画后从DOM中删除该元素。另外，您可以使用一些聪明的Javascript观看动画何时完成：

var element = document.getElementById("#box");
element.addEventListener("webkitAnimationEnd", function(){
    this.style.webkitAnimationName = "";
}, false);
document.getElementById("#button").onclick = function(){
    element.style.webkitAnimationName = "shake";
    // you'll probably want to preventDefault here.
};

这个小片段实际上来自堆栈溢出线程。这是一个不错的选择，请将其添加为书签！

对抗闪光灯

如果您正在编写自己CSS动画，则可能会在Safari，Chrome和iOS设备上注意到一些奇怪的地方。就在动画运行之前，有问题的动画元素将在开始播放之前闪烁入和消失。

这种现象背后的原因尚不清楚，但解决方法非常简单。只需添加-webkit-backface-visibility: hidden; CSS规则应有助于防止此问题。将其应用于元素的容器，如下所示：

.container {
	-webkit-backface-visibility: hidden;
}

归结为另一个硬件加速问题-使用此属性只会使加速加速。您也可以使用-webkit-perspective: 1000; 或其他3D属性。

伪元素和Z索引

这是CSS动画和过渡的另外两个不幸的事实。 您不能在伪元素上使用动画或过渡。 这个事实在网络上记录得很少，但这是一个重要的事实。举例来说，假设您希望将:after伪元素悬停在其父元素上时淡入可见性。不幸的是，它会在状态之间切换而不是优雅地过渡。据我们所知，这是不正常的行为：Chrome和Webkit提交了错误报告-Firefox实际上支持这些转换。您可以在CSS技巧上跟上对伪元素上的过渡和动画的支持的最新状态。

但是，值得注意的是，如果将过渡或动画应用于具有伪元素的元素，则这些过渡将被传递到伪元素。

现在又要咬牙了。 过渡和动画会重置对象的z索引。 如果您有一些要动画的堆叠对象，则将重置其堆叠顺序。同样，这是一个不幸的事实，不是很多人谈论的一个。

逼真的动作

我可能会在这里遇到很多麻烦，但是您可以通过使用计时功能使动画更加逼真。如果仅保留动画的默认计时功能（轻松），则最终会得到一些非常不错的效果。但是，如果您试图在CSS中重新创建特定的运动模式，那么了解不同计时功能之间的区别就很重要。让我们以Animate.css中的“铰链”动画为例。

动画背后的想法是让元素从当前位置掉落，从单个角摆动一会儿，然后完全掉落-有点像破损的迹象。这很重要-动画需要多种计时功能才能使其逼真。考虑一下现实生活中的这一动作；当信号下降并开始摆动时，它将缓慢开始，然后加速，然后在峰值时缓慢回落。但是，当它完全掉落时，它应该突然掉下来并随着下落而加速。听起来我们既需要ease-in-out ease-in 。

实际上很简单。在关键帧内，您可以声明不同的计时功能-如下所示：

@keyframes hinge {
	0% {
		animation-timing-function: ease-in-out;
		transform: rotate(-120deg);
		transform-origin: top left;
	}

	25% {
		animation-timing-function: ease-in-out;
		transform: rotate(70deg);
		transform-origin: top left;
	}

	50% {
		animation-timing-function: ease-in-out;
		transform: rotate(-120deg);
		transform-origin: top left;
	}

	100% {
		animation-timing-function: ease-in;
		transform: rotate(0deg) translateY(200%);
	}
}

通过使用各种计时功能，而不只是默认的计时功能，我们可以更好地控制动画的播放方式。如果运行不具有自定义计时功能的铰链动画，则可以看到它的外观。在编写动画时，请将它们与同一动作的真实实例进行比较。放慢脚步，然后思考每个人的计时方式。

不要像1999年那样设计

这可能是您带走的最重要的东西，所以请听。我坚信CSS动画将很少用于增加交互性，仅此而已。像Anthony Calzadilla这样的聪明人正在用CSS动画制作一些疯狂的酷东西，但在我看来，在现实世界中，这些动画应该很少而且相距甚远。

以该页面为例。此处的所有内容（强制性gif动画除外）均使用CSS进行动画处理。这是一个极端的例子，但是您可以看到为什么我担心这些东西的过度使用。

所有CSS3属性也是如此。过渡，阴影和渐变应谨慎使用。我认为Owlr的目标网页是一个很好的例子。提交无效的电子邮件或空白表格会产生验证错误，并带有一些不必要的动画来引起注意。

Dan Cederholm在他的《 CSS3 For Web Designers 》（这是一本很棒的书）中，谈到了“体验层”。他强调了一点，他的书中展示的所有CSS3值仅是为了增加经验而已-所添加的效果不是必需的，并且在不完全支持它们的浏览器中应始终优雅地降级。记住这条规则，您将变得比想象中更强大。或类似的东西。

性能问题

大多数计算机具有足够的功能来运行CSS3动画和过渡，没有问题-但是，您尝试注入CSS的次数越多，对性能的影响就越大。

以一个简单的动画为例，该动画将div从左向右无限移动。简单的东西。让我们让这个框更有趣-给它一个框阴影，文本阴影，也许是一个渐变...所有这些规则都会影响页面的性能。如果您给div一个阴影半径模糊的框阴影（我在这里谈论数百个），您会注意到性能严重下降。浏览器正在努力工作，试图弄清楚如何渲染构成盒子阴影的像素，从而开始占用动画甚至页面的其余部分的资源-滚动之类的简单任务可能会变得非常缓慢。将视觉增强效果降至最低，尤其是阴影。

硬件加速有助于防止此问题，但是仍然需要注意这一问题。并非所有用户都拥有豪华的硬件加速功能，而软件渲染的图形可能会在计算机上造成损失。