详解css和js动画底层原理及如何优化它们的性能(详解css和js动画底层原理及如何优化它们的性能模式)

javascript栏目介绍CSS和JS动画的底层原理

相关免费学习推荐：javascript（视频）

概述

你一定知道，动画正在创造引人注目的东西 Web 在应用程序中起着重要的作用。随着用户越来越关注用户体验，商家开始意识到完美愉快用户体验的重要性，结果 Web 应用程序变得越来越重，并且有更多的动态交互 UI。所有这些都需要更复杂的动画，以便用户在整个过程中更顺利地进行状态转换。今天，这甚至不被认为是什么特别的东西。用户变得越来越挑剔，默认情况下，他们期望的是高响应性和交互性的用户界面。

然而，界面的动画并不一定很简单。什么是动画，什么时候使用动画，动画应该有什么样的视频效果，这些都是棘手的问题。

JavaScript 和 CSS 动画比较

创建 Web 两种主要的动画方法是使用JavaScript和 CSS。没有对错的选择完全取决于你想要达到的效果。

CSS 动画

用CSS制作动画是让元素在屏幕上移动的最简单方法。

这里将从如何让元素在这里 X 和 Y 轴上移动 50px 从一个简单的例子开始，通过持续的例子， 1 秒的 CSS 过渡到移动元素。

.box {
  -webkit-transform: translate(0, 0);
  -webkit-transition: -webkit-transform 1000ms;

  transform: translate(0, 0);
  transition: transform 1000ms;
}

.box.move {
  -webkit-transform: translate(50px, 50px);
  transform: translate(50px, 50px);
}

当元素加上 move 类时，改变 transform 然后开发过渡效果。

除了转换持续时间外，还有转换持续时间 easing 属性，这其实就是动画的运动速度方式，这个参数以后会详细介绍。

如果像上面的代码片段一样创建单独的代码片段 CSS 类来实现动画，当然也可以用 JavaScript 切换每一个动画。

如下元素：

p class=