CSS 动画与 JavaScript 动画 | Articles

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

独立的冰棍 · CSS 动画与 JavaScript 动画 ...· 2 周前 ·

有胆有识的玉米 · 青春期：男孩和女孩的性健康教育_影评_评价 ...· 6 月前 ·

痛苦的开心果 · 校纪委召开“以案为鉴知敬畏 ...· 7 月前 ·

酒量小的登山鞋 · MySQL数据库管理：基础操作与进阶技巧· 8 月前 ·

高大的毛衣 · SQL老司机，在SQL中计算 array ...· 10 月前 ·

力能扛鼎的生姜 · LINUX查看数据库字符集命令 • ...· 10 月前 ·

使用 CSS 动画实现更简单的“一次性”转换，例如切换界面元素状态。

如需实现弹跳、停止、暂停、快退或减速等高级效果，请使用 JavaScript 动画。

如果您选择使用 JavaScript 进行动画处理，请使用 Web Animations API 或您熟悉的现代框架。

大多数基本动画都可以使用 CSS 或 JavaScript 创建，但所需的工作量和时间有所不同（另请参阅 CSS 与 JavaScript 性能）。每种方法都有各自的优点和缺点，但以下准则很有帮助：

如果界面元素具有较小的自包含状态，请使用 CSS。 CSS 转场效果和动画非常适合从侧边拉出导航菜单或显示提示。您最终可能会使用 JavaScript 来控制状态，但动画本身将位于 CSS 中。

当您需要对动画进行精细控制时，请使用 JavaScript。 Web Animations API 是一种基于标准的方法，目前在大多数现代浏览器中都提供。这提供了真实对象，非常适合复杂的面向对象应用。当您需要停止、暂停、放慢或反向播放动画时，JavaScript 也非常有用。

如果您想手动编排整个场景，请直接使用 requestAnimationFrame 。 这是一种高级 JavaScript 方法，但如果您要构建游戏或向 HTML 画布绘制图形，则可能很有用。

或者，如果您已经在使用包含动画功能的 JavaScript 框架（例如通过 jQuery 的 .animate() 方法或 GreenSock 的 TweenMax ），那么您可能会发现，在动画方面坚持使用该框架会更方便。

利用 CSS 制作动画效果

使用 CSS 制作动画效果是让屏幕上的内容移动的最简单方法。这种方法被称为 声明式 ，因为您需要指定希望发生的情况。

下面是一些 CSS，用于在 X 轴和 Y 轴上移动元素 100px 。为此，您可以使用设置为采用 500ms 的 CSS 转换。添加 move 类后， transform 值会发生变化，并且过渡会开始。

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
.box.move {
  transform: translate(100px, 100px);
除了转场效果的持续时间之外，还有缓动选项，这实际上是指动画的感觉。如需详细了解缓动，请参阅缓动基础知识指南。
如果您像上面的代码段一样创建了单独的 CSS 类来管理动画，则可以使用 JavaScript 开启和关闭每个动画：
box.classList.add('move');
这样做可以为您的应用提供良好的平衡。您可以专注于使用 JavaScript 管理状态，只需在目标元素上设置适当的类，让浏览器处理动画即可。如果您选择此方法，则可以监听元素上的 transitionend 事件，但前提是您可以放弃对旧版 Internet Explorer 的支持；Internet Explorer 10 是第一个支持这些事件的版本。所有其他浏览器都已支持该事件一段时间了。
监听转换结束所需的 JavaScript 代码如下所示：
var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);
function onTransitionEnd() {
    // Handle the transition finishing.
除了使用 CSS 转场效果之外，您还可以使用 CSS 动画，以便更好地控制各个动画关键帧、时长和迭代次数。
注意： 如果您刚开始接触动画，那么关键帧是手绘动画中的旧术语。动画师会为某个动作创建特定帧（称为关键帧），这些帧会捕获某个动作的极端部分等内容，然后他们会着手绘制关键帧之间的所有单个帧。我们目前在 CSS 动画中采用了类似的流程，即指示浏览器 CSS 属性在给定时间点需要具有什么值，然后浏览器会填补空白。
例如，您可以使用过渡效果以相同的方式为该框添加动画效果，但无需用户执行任何互动（例如点击），并且无限重复。您还可以同时更改多项房源属性。
.box {
  animation-name: movingBox;
  animation-duration: 1300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  25% {
    opacity: 0.9;
  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
使用 CSS 动画时，您可以独立于目标元素定义动画本身，并使用 animation-name 属性选择所需的动画。
如果您希望 CSS 动画在旧版浏览器上正常运行，则需要添加供应商前缀。许多工具都可以帮助您创建所需 CSS 的带前缀版本，以便您在源文件中编写不带前缀的版本。
使用 JavaScript 和 Web Animations API 创建动画
与编写 CSS 转场效果或动画相比，使用 JavaScript 创建动画要复杂得多，但通常能为开发者提供更强大的功能。您可以使用 Web Animations API 为特定 CSS 属性添加动画效果，或构建可组合效果对象。
JavaScript 动画是命令式的，因为您将其作为代码的一部分内嵌编写。您还可以在其他对象中封装它们。以下是您需要编写的 JavaScript 代码，用于重新创建前面所述的 CSS 转换：
var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
默认情况下，Web 动画仅修改元素的呈现方式。如果您希望对象保持在其移动到的位置，则应在动画结束后修改其底层样式，如我们的示例所示。
Web Animations API 是 W3C 推出的一项相对较新的标准。大多数新型浏览器都原生支持它。对于不支持的新型浏览器，提供了 polyfill。
使用 JavaScript 动画时，您可以完全控制元素的每个步骤的样式。这意味着，您可以减慢动画速度、暂停动画、停止动画、反向播放动画，以及根据需要操控元素。如果您要构建复杂的面向对象应用，这尤其有用，因为您可以正确封装行为。
  如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
  最后更新时间 (UTC)：2014-08-08。
      [[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC)：2014-08-08。"],[],[]]