大前端开发中经常会遇到动画的开发,那么什么是动画?在物理学中运动就是研究物体在时间维度和空间维度上改变的现象,所以动画也一样,动画主要研究2个因素,发生运动物体的时间和空间。
Web前端开发中的动画
在 Web 前端开发中实现动画有2种方式。要么依靠 CSS 实现动画,要么依靠 JS 控制实现动画。
CSS 实现动画
首先要说 CSS 中的4个概念:animation、transition、transform、translate。
这里就不解释它们了,这里推荐一个css动画库给大家参考使用。
注释:以下是使用方法案例,记得在css类中添加 animate__animated 。
-------------
animate.css
网址:https://animate.style/
-------------
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
</head>
<body>
<div class="animate__animated animate__backInDown">IT源码网——css动画库效果展示</div>
</body>
</html>