animate.css的使用

最新推荐文章于 2024-05-29 09:35:06 发布
最新推荐文章于 2024-05-29 09:35:06 发布
阅读量4.3k 收藏 9
点赞数 3
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61685599/article/details/120933275
版权

animate.css是一个CSS3动画库，它的里面预设了许多的常用动画。因为它把不同动画效果绑定到的是不同的类里面，所以我们想要使用的话，只需要先引用animate.css文件，再把你想要使用的那个类添加到元素上面就可以了。

第一步：引入animate.css文件：

（可使用：http://www.bootcdn.cn/animate.css/的服务）

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

第二步：在需要添加效果的元素上加上想要实现的动画样式名

（第一个animated是必须添加的样式名，第二个是指定的动画样式名。）

<div class="animate__animated animate__slideInLeft">

其他补充：（采用jquery可以不修改现有代码，动态添加动画）

1.如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

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

2.当动画效果执行完成后还可以通过以下代码添加事件

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

3.你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){
    $('#yourElement').addClass('animated bounce');
});

4.有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){
    $('#yourElement').addClass('animated bounce');
    setTimeout(function(){
        $('#yourElement').removeClass('bounce');
    }, 1000);
});

5.animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#yourElement{
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

常用的动画：

Attention seekers（寻求关注者）
bounce        
flash         
pulse        
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat


Back entrances（返回入口）
backInDown
backInLeft
backInRight
backInUp


Back exits（返回出口）
backOutDown
backOutLeft
backOutRight
backOutUp


Bouncing entrances（弹跳入口）
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp


Bouncing exits（弹跳出口）
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp


Fading entrances（淡出的入口）
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight


Fading exits（退场出口）
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft


Flippers（脚蹼）
flip
flipInX
flipInY
flipOutX
flipOutY


Lightspeed（光速）
lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft


Rotating entrances（旋转入口）
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight


Rotating exits（旋转出口）
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight


Specials（特殊）
hinge
jackInTheBox
rollIn
rollOut


Zooming entrances（缩放入口）
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp


Zooming exits（缩放出口）
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp


Sliding entrances（滑动入口）
slideInDown
slideInLeft
slideInRight
slideInUp


Sliding exits（滑动出口）
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

参考文章：animate中文网

Lucky0707
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-使用animate.css实现动画
shijiaolong0的博客
02-20 829
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="css/bootstrap.min
vue 使用animate.css动画库
PrimaryColor
08-03 482
vue和最新版的animate动画库不兼容，所以不能安装最新版的animate动画库。 一、引入： 在public文件夹中的index.html加入以下代码： <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> 二、使用： 在需要设置的地方添加类样式，默认类样式“animated”必须添加： 三、示例： <input type="button" valu
如何使用animate.css动画库
qczzc的博客
05-21 5404
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
推荐一款优雅的React动画库：React-Animated-CSS
最新发布
gitblog_00015的博客
05-29 297
推荐一款优雅的React动画库：React-Animated-CSS 项目地址:https://gitcode.com/digital-flowers/react-animated-css 在前端开发中，为用户体验添加流畅的过渡和动画效果是至关重要的。今天，我想要向大家推荐一个轻巧而强大的React组件——React-Animated-CSS，它能让你轻松地利用Animate.css库实现各种炫酷...
经典动画库 animate.css 的应用
九天翔龙的技术博客
11-15 8336
Animate.css 就像嗑水那么简单的CSS动画。其核心技术使用了 CSS3 里的@keyframes和animation。各大浏览器只要不是太旧的版本都能兼容。
animate.css简介
chujuan7169的博客
12-11 451
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。 ...
css3动画简介以及动画库animate.css的使用
岁末zzz的博客
05-05 1657
过渡动画 第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。 要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有 transition-property：规定对哪个属性...
纯css动画效果--animate的应用
热门推荐
YaoQing222的博客
08-11 1万+
前言 需要某个小图标或者文字转圈的效果，部分伙伴会用js去写一个定时器，然后再去清空定时器，这样做是比较麻烦的。之前在学css里的有一个animate方法。下面就讲animate的使用： animate调用的属性值 语法：animation: name duration timing-function delay iteration-count direction; 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动
Animate.css的详解
qq_37647812的博客
02-24 6646
Animate.css是一款简单高效的css库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。 1、导入文件 <head> <link rel="stylesheet" href="animate.min.css"> </head> 2、给指定元素加上指定的动画样式 <div class="animated bounce"></div> animated，每一个应用animate.css效果的元素都必须添加这
wow.min.js和animate.css
04-20
在实际应用中，"wow.min.js" 和 "animate.css" 结合使用，可以帮助开发者快速创建具有吸引力的网页，而无需深入了解复杂的CSS3动画细节。同时，这种技术也适用于响应式设计，因为它们支持各种屏幕尺寸和设备。但需要...
animate.css-4.1.1.zip
02-03
Animate.css是一个流行的开源库，专为网页设计师和开发者提供了一系列预先定义好的动画效果。这个"animate.css-4.1.1.zip"压缩包包含了Animate.css的4.1.1版本，这是一个更新到最新状态的库，确保了你能够获得最新的...
animate.min.css
03-17
CSS3动画库
Animate.css:随便添加CSS动画-开源
04-18
Animate.css是一个跨浏览器库，包含有趣CSS动画。 当您需要在项目中添加一些动感和震撼力时，只需滑动这些仅添加水的动画之一，即可观看视觉效果显着改善！ 使用Animate.css动画非常简单。 仅需几个步骤就可以得到一个很棒CSS动画元素。 从各种各样的动画中进行选择，并控制它们的速度。 使用这些动画来表达，强调，吸引注意力，或者只是使项目看起来生动活泼。
超棒的跨浏览器纯CSS动画实现 Animate.css使用方法
09-25
在今天的这篇文章中，我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester， UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果
jQuery封装animate.css的实例
10-18
### 四、使用封装的animateCss方法 现在你可以像下面这样调用封装好的方法来触发动画： ```javascript $('#box').animateCss('bounce'); ``` 这将使得`#box`元素立即开始执行`bounce`动画，并在动画结束后自动移除...
【animate.css】animate.css 的用法，轻松给页面加上动画
Owen的博客
10-22 946
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-scal.
css动画库——animate.css的使用
往事随风
04-29 1379
最近发现了一个写css动画的库，觉得还不错，分享给大家 1、进入animate.css动画库官网 进入动画库看一看效果 2、上代码 使用cdn引入动画库 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> 3、为需要添加动画的元素添加 class名（官网上有动画的class名称，可以同时添加多个，但是必须要有 animated 名） <div
animate.css动画库使用方法介绍
xyphf的博客
07-13 7767
animate.css动画库简介 Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。 它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句
CSS3动画animation认识和Animate.css的使用
极客神殿
09-05 2263
CSS动画可以取代js动画 在移动端会更加流畅！ 下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！ 首先我们需要创建一个@keyframes规则 @keyframes name{ from{width:1px} to{width:100px} } //或者使用百分比 @keyframes name{ 0%{width:1px} 100{width:100...
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应用程序中方便地实现动态效果，增强用户体验，并且简化了开发人员的操作。但需要注意的是，为了保证页面的性能，应适度使用动画效果，以避免过度设计的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值