2-23 关于animate动画库的学习？

关于这个动画库？

是在GitHub上找到的对应的代码库下载到本地
然后在HTML文档的head中添加引入对应的.css文件
在CSS文件的代码中找到对应需要的动画名称
添加到要实现动画的对象的类名上
是这个流程吗？但是感觉动画库很长要一个一个找过来不是会很麻烦？关于我按照官网的指引添加了动画名称，但是动画没有生效是什么原因？
相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 首先引入animate.css文件 -->
    <link rel="stylesheet" href="./CSS/animate.css-main/animate.min.css">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 40px auto;
        }
    </style>
</head>

<body>
    <div class="animate__bounceInLeft"></div>
</body>

</html>

呜蜩的呀 2022-08-02

源自：过渡与动画 2-23 项目作业

收起

1回答

imooc_慕慕 2022-08-03 10:06:19

同学你好，可以用官网的这个在线链接，这样写是可以的，线上地址链接：

http://www.dowebok.com/demo/2014/98/animate.min.css

同学的步骤是可以的，在第五步的内容中可以直接在官网上找对应的动画名，参考如下图：

官网地址：https://www.jq22.com/yanshi819/

直接点击然后复制，类名中加上animated 再将类名复制到div中就可以了。

同学可以再试试。

祝学习愉快~

收起回答

提问者呜蜩的呀 #1

按照老师的讲解修改了代码，但是依旧没有都动画效果出现，这是为什么呢？是在GitHub上下载了animation动画库的css文件引入后再操作的，是哪里有问题呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 首先引入animate.css文件 -->
    <link rel="stylesheet" href="./CSS/animate.css-main/animate.min.css">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 40px auto;
            animation-timeline: 10s;
        }
    </style>
</head>

<body>
    <!-- 在类名上加上对应的动画效果名称 写法要求是：animated 动画名称 -->
    <div class="animated bounceInLeft"></div>
</body>

</html>

2022-08-08 14:06:08

imooc_慕慕回复提问者呜蜩的呀 #2

同学你好，上面给的地址是不需要添加前缀的，可以实现，猜测同学下载到本地的可能是最新版本，因此需要添加前缀，参考如下：
<div class="animate__animated animate__bounceInLeft"></div>
可以再测试下，同时这个animation动画库存在兼容性，同学可以多在几个浏览器中试一试，
祝学习愉快~

2022-08-08 18:10:02