您现在的位置: 首页 > 站长学院 > CSS

css动画库推荐 animate.css

来源:源码网 发布时间:2020-09-04 17:29:42热度:IT源码网
大前端开发中经常会遇到动画的开发,那么什么是动画?在物理学中运动就是研究物体在时间维度和空间维度上改变的现象,所以动画也一样,动画主要研究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>

 
    责任编辑:老铁