Animate.css动画库下载、安装、使用与解析

最新推荐文章于 2023-05-21 03:12:26 发布
最新推荐文章于 2023-05-21 03:12:26 发布
阅读量1.7w 收藏 75
点赞数 15
分类专栏： HTML/CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40976321/article/details/107379659
版权

（一）uni-app中引入Animate动画库

（1）下载animate动画文件

官方文档：http://www.animate.net.cn/

官方下载地址：https://animate.style/ 

（不知道官方下载的最新版本出现了什么问题，下载官方最新的没有效果，自己去找找问题，找到问题之后希望能够留言反馈给我，个人懒得去找原因了，下面Animate3.7版本的是可用的）

animate动画库的cdn地址：

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

简单粗暴的下载方法：复制cdn地址，对源码直接复制，保存到记事本，并更改文件名称为animate.css

（2）将下载好的animate动画文件添加到自己的项目中，并全局配置使用（common 是自定义文件夹）

/*引入自定义动画库 animate.css*/
	@import "/common/animate.min.css";

（3）使用animate动画库 ： animated + 动画

<view style="line-height: 25px;" class="animated rotateInUpRight" hover-class="fadeInUp">哈萨克激动啥肯定会进口的哈萨克记得哈卡斯</view>
<view style="line-height: 25px;" class="animated rotateInUpLeft" hover-class="flip">肯定会进口的哈萨克记得哈卡斯</view>

效果展示：

（4）宝典秘籍：Animate动画库所有动画样式


Class Name
bounce :上下弹跳
flash :闪烁
pulse :脉冲
rubberBand :橡皮筋式拉动
shake:摇晃
headShake :也是摇动
Swing :摆动
tada :缩放后晃动
wobble :左右晃动
jello :果冻弹弹
bounceIn :缩放后弹入
bounceInDown:下拉弹入
bounceInLeft :左侧弹出
bounceInRight :右侧弹出
bounceInUp :向上弹出
bounceOut :弹跳之后隐藏
bounceOutDown :弹跳之后向下隐藏
bounceOutLeft :弹跳之后向左隐藏
bounceOutRight :弹跳之后向右隐藏
bounceOutUp :弹跳之后向上隐藏
fadeIn :淡出
fadeInDown :下侧淡出拉出
fadeInDownBig :下拉直接呈现
fadeInLeft :左侧淡出拉出
fadeInLeftBig :左侧拉出
fadeInRight :右侧淡出拉出
fadeInRightBig :右侧拉出
fadeInUp :向上淡出拉出
fadeInUpBig :向上拉出
fadeOut :淡入
fadeOutDown :向下淡出隐藏
fadeOutDownBig :向下隐藏
fadeOutLeft :向左淡出隐藏
fadeOutLeftBig :向左隐藏
fadeOutRight :向右淡出隐藏
fadeOutRightBig :向右隐藏
fadeOutUp :向上淡出隐藏
fadeOutUpBig :向上隐藏
flipInX : x轴弹出
flipInY : y轴弹出
flipOutX : x轴弹入
flipOutY : y轴弹入
lightSpeedIn :快速拉出(附带菱形效果)
lightSpeedOut :快速拉入(附带芾菱形效果)
rotateIn :旋转弹出
rotateInDownLeft:上至下左侧旋转弹入
rotateInDownRight:上至下右侧旋转弹入
rotateInUpLeft:下至上左侧旋转弹入
rotateInUpRight:"下至上右侧旋转弹入

rotateOut :旋转弹出
rotateOutDownLeft:.上至下左侧旋转弹出
rotateOutDownRight :上至下右侧旋转弹出
rotateOutUpLeft :下至上左侧旋转弹出

rotateOutUpRight :下至上右侧旋转弹出
hinge :落叶式弹出
jackInTheBox:侧身弹出
rolIn :左侧向右滚入
rollOut :向右滚出
zoomIn :缓慢弹入
zoomInDown:下拐弯弹入(赞个)
zoomInLeft :左拐弯弹入
zoomInRight :右拐弯弹入
zoomInUp:上拐弯弹入
zoomOut :弹出
zoomOutDown:下拐弯弹出
zoomOutLeft :左拐弯弹出
zoomOutRight :右拐弯弹出
zoomOutUp :上拐弯弹出
slideInDown :向下侧拉入
slideInLeft :左侧拉入
slideInRight :右侧拉入
slideInUp: 向上拉入
slideOutDown :向下拉出
slideOutLeft :向左拉出
slideOutRight :向右拉出
sideoutUp :向上拉出

官方演示地址：http://www.jq22.com/yanshi819


 

Muchen灬
关注
  • 15
    点赞
  • 踩
  • 75
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
animate.css动画库，汉化注释
12-04
一个css大神制作的成品的动画库，对控件动画有效，我做了测试和动画效果注释汉化。因为不是自己的东西，就不要分了，当然百度的静态资源库应该也是有的，不过对于初学者，注释还是很有必要的。截止2015年12月1号的版本
fullpage.js结合animate.css实现滚屏动画
06-11
fullpage.js结合animate.css实现滚屏动画，每段代码都加有详细注释 文章地址：https://blog.csdn.net/cplvfx/article/details/80649574
安装使用Animate动画库【Animate.css下载安装教程】
qq_22841387的博客
06-04 2655
在官网中选择你所需要的的样式，这里我选择的是 点击右侧的复制按钮 一定记得加上不然会没有效果的！！
21vue学习——使用第三方animate.css实现动画效果
weixin_42530160的博客
08-04 349
前面我们学习了使用 vue 提供的 transition 元素以及过渡类来实现简单的动画，那除此之外呢，我们还可以借助其他第三方的类来实现动画效果，我们接下来要介绍的就是 animate.css。让我们来学习一下如何借助这个第三方 css 文件里面的类来实现我们需要的动画效果吧！
animate.css的使用——老板再也不用担心我没有特效了！
weixin_42855542的博客
12-13 2340
animate.css—— 一款强大的预设css3动画库！ 你还在使用hover？还在自己写动画帧? 一个人的脑洞总是有限，让我们一起来看看一仓库的创意，从中启发属于你的动画效果！！！ animate.css体验（附带下载）：https://daneden.github.io/animate.css/ 或这git下载：https://github.com/daneden/animate.css 使...
animate(CSS动画库)
07-15
animate css最新4.1.1文件打包下载 制作前端动画效果，GitHub搬运方便下载
初识Animate.css
weixin_55747430的博客
05-10 3435
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。一、安装使用安装二、基本用法1.使用方式三、keyframes关键帧 前言 Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。 官方学习文档网址 一、安装使用 安装 使用 npm 安装： $ npm install animate.css -.
如何使用animate.css动画库
qczzc的博客
05-21 4275
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
Animate.css介绍及使用教程
热门推荐
Andrelia的博客
07-13 1万+
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用 引入 　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 https://raw.github.com/daneden/animate.css/mas...
【css】使用Animate.css
weixin_46590928的博客
11-19 2181
自定义预设动画类的属性。}通过js代码修改css变量 // All animations will take twice the time to accomplish document . documentElement . style . setProperty('--animate-duration' , '2s');
Animate.css的使用（基本使用附css文件下载地址）-附件资源
03-02
Animate.css的使用（基本使用附css文件下载地址）-附件资源
wow.min.js和animate.css
04-20
css动画效果 wow插件需要的wow.min.js和animate.css
Animate.css 一款强大的预设css3动画库
08-11
Animate.css内置了很多典型的css3动画，兼容性好使用方便。 演示地址：http://www.jq22.com/jquery-info819
vue 1.0 结合animate.css定义动画效果
10-18
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本
animate.min.css动画特效
04-08
Animate.css是某位大牛写好的动画效果集合，需要的时候可以直接下载导入到项目中，在需要的元素上添加相关的类即可使用相对应的动画效果。
微信小程序表格的实现（纯css 表格的实现）
Muchen灬
06-30 8057
display:table的用法 大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css为什么不用table系表格元素呢？ 1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大 2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示 3、非表格内容用table来装，
element-ui走马灯实现图片自适应
Muchen灬
02-26 7674
elementUI走马灯实现图片自适应（等比缩放，使得图片缩小不挤压，放大不拉伸变形） 解决方法的原理：监听屏幕视口大小如果'resize',发生改变了，就获取图片的高度height，然后渲染到页面 代码： <el-carousel :interval="5000" arrow="always" :height="bannerHeight+'px'" style="border:...
JS实现上移、下移、置顶、置底、删除功能的实现
Muchen灬
08-25 6282
1、使用数组splice方法交换位置实现上移、下移、删除功能 2、使用splice、unshift、push方法实现置顶功能 效果展示： 功能解析： （1）上移、下移功能 上移操作的原理： 将 当前的index 元素往上移动一位，到 index -1 位置，所以通过splice () 方法，将 当前位置的元素添加到index-1 位置中，添加过后数组的长度+1 ，原来index位置往后添加一位，变成 index + 1 , 所以我们需要将 index + 1 位置元素删掉 ...
vue animate.css 使用方法
最新发布
06-28
### 回答1： Vue Animate.css 是一个 Vue.js 的插件，它可以让你轻松地在 Vue.js 应用程序中使用 Animate.css 动画库。使用 Vue Animate.css，你可以通过简单的指令来添加动画效果，而不需要编写任何 JavaScript 代码。下面是使用 Vue Animate.css 的步骤： 1. 安装 Vue Animate.css 插件： ``` npm install vue-animate-css ``` 2. 在 Vue.js 应用程序中引入 Vue Animate.css 插件： ``` import Vue from 'vue' import VueAnimateCss from 'vue-animate-css' Vue.use(VueAnimateCss) ``` 3. 在 Vue.js 组件中使用指令来添加动画效果： ``` <template> <div v-animate="'bounce'">Hello, world!</div> </template> ``` 在上面的例子中，我们使用 `v-animate` 指令来添加 `bounce` 动画效果。你可以在 Vue Animate.css 文档中找到更多可用的动画效果。 希望这个回答能够帮助你！ ### 回答2： Vue animate.css是一款非常方便实现各种动画的工具。它是基于开源库animate.css开发而来，使得在Vue项目中使用动画效果变得更为便捷。 首先，在Vue项目中还需要安装vue-animate-css这个插件以便使用这款工具。可以使用npm包管理工具来安装它，输入以下命令然后等待安装完成。 npm install vue-animate-css --save 使用这个工具的方式通常有三种： 1. 以组件的方式使用： 在需要使用动画效果的组件内，引入vue-animate-css库并且设置样式class即可。例如： ``` <template> <div> <h1 :class="animatedClass">例子</h1> </div> </template> <script> import {hover, fadeIn} from 'vue-animate-css'; export default { data: () => ({ animatedClass: hover + ' ' + fadeIn }) } </script> ``` 2. 作为全局 mixin： 使用全局mixin方法后，在整个Vue项目内都可以方便地使用动画效果。比如： ``` import Vue from 'vue'; import {bounce} from 'vue-animate-css'; Vue.mixin({ methods: { bounce: bounce } }); ``` 在使用时只需要在需要使用效果的元素上添加样式类名即可。 3. 通过指令使用： 通过指令使用在有些情况下更为直观。在使用前需要先在Vue项目中引入animate.css库。比如： ``` import 'animate.css/animate.min.css'; import Vue from 'vue'; Vue.use({ install(Vue) { Vue.directive('animate', { inserted: (el, binding) => { el.addEventListener('animationend', () => { el.classList.remove(binding.value, 'animated'); }); el.classList.add('animated', binding.value); } }); } }); ``` 在使用指令的组件中，可以在需要使用动画效果的元素上添加v-animate指令，比如： ``` <template> <div> <h1 v-animate="'bounce'">例子</h1> </div> </template> ``` 这样就可以实现元素在页面加载时弹跳一次的效果。 总的来说，vue animate.css是一个非常实用的库，可以便捷地实现各种动画效果。具体使用方法可以根据自己的项目需求来灵活运用。 ### 回答3： Vue animate.css是一款能够为Vue应用程序添加动画效果的插件。它通过使用animate.css框架中的动画类名称，实现了Vue动态展示元素的效果。使用Vue animate.css可以省去手写CSS或Javascript动画的烦琐操作，同时可以方便地实现页面元素的动态效果，提升用户体验。 Vue animate.css的使用方法如下： 1. 安装Vue animate.css插件，在命令行中运行以下命令： ``` npm install vue-animate-css --save ``` 2. 在Vue组件中引入vue-animate-css的插件： ``` import VueAnimateCss from 'vue-animate-css'; Vue.use(VueAnimateCss); ``` 3. 在组件的模板中添加需要动画效果的元素，并绑定动画类名称： ``` <template> <div> <h1 v-animate-css="'bounceIn'" class="animated">{{ message }}</h1> </div> </template> ``` 4. 在组件的样式表中引入animate.css框架，并为绑定动画类名称的元素添加相应的样式： ``` <style> @import "animate.css"; .animated { animation-duration: 1s; } </style> ``` 5. 在运行应用程序时，就可以看到具有动态效果的元素了。 在以上的使用方法中，v-animate-css即为绑定动画类名称的指令，'bounceIn'为animate.css框架中的一个动画类名称，可以根据需要自由更换。同时，样式表中的animation-duration属性可控制动画持续的时间。 总之，使用Vue animate.css可以在Vue应用程序中方便地实现动态效果，增强用户体验，并且简化了开发人员的操作。但需要注意的是，为了保证页面的性能，应适度使用动画效果，以避免过度设计的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值