【animate.css】animate.css 的用法，轻松给页面加上动画

最新推荐文章于 2024-08-28 17:58:52 发布

meichaoWen

最新推荐文章于 2024-08-28 17:58:52 发布

阅读量995

点赞数

本文链接：https://blog.csdn.net/meichaoWen/article/details/109232442

版权

本文档介绍了如何在网页中使用Animate.css库来添加动画效果。通过两种方式引入animate.min.css，一种是直接添加类名，另一种是通过CSS动画属性。提供了包括无限循环、延迟执行和重复次数在内的实例，帮助开发者轻松创建动态效果。

摘要由CSDN通过智能技术生成

git地址：https://github.com/animate-css/animate.css

文档：https://animate.style/

应用：

一、第一种方式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
    <h1 class="animate__animated animate__bounce">An animated element</h1>
</body>

1、第一步：引入animate.min.css

2、第二步：安装Animate.css之后，将该类animate__animated以及任何动画名称添加到元素中（不要忘记animate__前缀！）

3、成功。

二、第二种方式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        .my-element {
            animation: bounce;
            /* referring directly to the animation's @keyframe declaration */
            animation-duration: 2s;
            /* don't forget to set a duration! */
        }
    </style>
</head>

<body>
    <div class="my-element">我是一个动画</div>
</body>

</html>

三、实例

1、想要动画循环执行

<h1 class="animate__animated animate__bounce animate__infinite">
    An animated element
</h1>

2、想要动画延迟执行（动画将在3秒后执行）

<h1 class="animate__animated animate__bounce animate__delay-3s">
    An animated element
</h1>

3、想要动画执行3次（1次、2次、3次）

<h1 class="animate__animated animate__bounce animate__repeat-3">
    An animated element
</h1>

以上。

meichaoWen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫