css animation动画完成后隐藏_CSS 和 JS 动画底层原理及如何优化它们的性能

概述

你肯定知道，动画在创建引人注目的 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 来切换每个动画。

如下元素：

div class="box">  Sample content.