animate.css 动画库的下载与使用

简介: animate.css 动画库

作者:WangMin
格言:努力做好自己喜欢的每一件事

animate.css是什么?

animate.css 是一个有趣,酷炫的,跨浏览器的动画库,里面包含了许多常用的css动画。你可以将它用于你的项目中,不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果。

1.jpg

我们要使用的它的话需要把它加到自己的页面中,接着就可以在需要动画的元素标签上直接调用里面的动画,然后调节动画次数延迟等达到自己需要的效果就可以了。

怎么获取 animate.css

1、从官网下载
animate.css 官方下载

2、使用在线cdn
animate.css 在线地址:https://unpkg.com/animate.css@3.5.2/animate.min.css

怎么使用 animate.css

1)引入CSS文件
相信大家对引入外部的CSS样式文件的代码以及快捷键应该很熟悉,你只需要在HTML文件的head标签中引入CSS样式文件,如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animate-test</title>
        <link href="css/animate.min.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
    </body>
</html>

2)辅助类
给你想添加动画效果的元素添加一个 animated 类(必需)。如果需要动画循环运动,你还需要给这个元素追加 infinite 类,又或者自己另外定义一个类似于 infinite 的类。
3) 效果添加
接下来就是最后一步了,也是最重要的一步,为元素添加你想要的效果所对应的类名就可以查看效果了。简单列举几个:

bounce 弹跳
flash 闪烁
pulse 放大,缩小
rubberBand 放大,缩小,弹簧
shake 左右晃动
headShake 左右小幅晃动
swing 左右扇形摇摆
tada 放大,左右上下晃动,缩小
wobble 左右小幅(圆点较远)扇形摇摆
jello 左右左右上下晃动

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animate-test</title>
        <link href="css/animate.min.css" type="text/css" rel="stylesheet"/>
        <style type="text/css">
            .box{
    
                width:200px;
                height:200px;
                background:#CCCCCC
            }
        </style>
    </head>
    <body>
        <div class="box animated bounce"></div>
    </body>
</html>

具体动画效果可以自己实际操作,然后运行浏览器查看。

下面来详细介绍animate.css里面的类:

类名 效果
Attention 晃动效果
Bounce 弹性缓冲效果
Fade 透明度变化效果
Flip 翻转效果
Rotate 旋转效果
Slide 滑动效果
Zoom 变焦效果
Special 特殊效果

还有一些辅助类:

infinite 无限循环

delay-1s,delay-2s,delay-3s,delay-4s,delay-5s 延迟

fast,faster 持续时间:快

slow,slower 持续时间:慢

如果你想要改变动画效果,可以自定义配置,如下:

//初始,默认
#yourElement{
    animate-duration: 1ms !important;    //动画持续时间
    transition-duration: 1ms !important;
    animate-delay: 0;    //动画延迟时间
    animate-iteration-count: 1 !important;    //动画执行次数
}

如果想要动画不停地执行,可以将animate-iteration-count: infinite ,或者直接在元素上添加类 .infinite 。

另外,还有一种使用方法,那就是通过 jQuery 或者自己定义的 CSS 规则来给目标元素一次性添加对应效果的 class 类。如下:

$('#yourElement').addClass('animated bounceOutLeft');

当然如果不想要元素使用某个动画效果,也可以通过 jQuery 来删除相应效果的类就可以了,如下:

$('#yourElement').removeClass('animated bounceOutLeft');
兼容

浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
|
16天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
|
21天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
21 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
41 0
JS配合CSS3实现动画和拖动小星星小Demo
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
27 0
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
58 5
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
3月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
3月前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决
|
3月前
|
前端开发 JavaScript 开发者
css过渡与动画
css过渡与动画
39 0