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=
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你