animate.css使用

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： html

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>app下载</title>
    <link href="css/animate.min.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        .aa{width: 100px;height: 100px;background: #f00;}
    </style>
</head>
<body>
    <div class="mm animated fadeInLeft infinite" id="aa"></div>
</body>
</html>

参考地址：https://www.cnblogs.com/xiaohuochai/p/7372665.html
参数

【Attention(晃动效果)】

复制代码
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello

【bounce(弹性缓冲效果)】

复制代码
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
【fade(透明度变化效果)】

复制代码
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

【flip(翻转效果)】

flip
flipInX
flipInY
flipOutX
flipOutY

【rotate(旋转效果)】

复制代码
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

【slide(滑动效果)】

复制代码
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

【zoom(变焦效果)】

复制代码
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

【special(特殊效果)】

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut

qq947289507
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
animate源代码（animate.js）
09-09
animate的源代码，在使用时可以直接引用，方便易用，实现各种过渡动画
vue 中使用 animate.css实现左滑动效果
LYR 的博客
01-28 936
<transition name="fade" enter-active-class="animate_animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" > <div v-show="show" class="alert " :class="style"...
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 1644
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
关于使用animate与position：fixed冲突的问题解决
weixin_43989837的博客
09-07 1355
一，问题描述 在使用animate之后使用position：fixed；fixed定位的元素会变得能够滚动了，不再一直悬浮在固定位置 二，解决方法。 2.1：是否使用animate的元素有增大旋转等动作，如果有是否因为这些动作而改变了父级元素的宽高，如果改变了body的宽高，fixed就会重新计算，会造成影响。 2.2：使用animate的时候特别是元素旋转，需要注意不要让元素为长方形，应该尽量做成正方形，长方形旋转很容易造成body的改变。 ...
animate.css的使用
m0_61685599的博客
10-24 4387
animate.css是一个CSS3动画库，它的里面预设了许多的常用动画。因为它把不同动画效果绑定到的是不同的类里面，所以我们想要使用的话，只需要先引用animate.css文件，再把你想要使用的那个类添加到元素上面就可以了。 第一步：引入animate.css文件： （可使用：http://www.bootcdn.cn/animate.css/的服务） <head> <link rel="stylesheet" href="animate.min.css"> &l
经典动画库 animate.css 的应用
九天翔龙的技术博客
11-15 8253
Animate.css 就像嗑水那么简单的CSS动画。其核心技术使用了 CSS3 里的@keyframes和animation。各大浏览器只要不是太旧的版本都能兼容。
animate.css简介
chujuan7169的博客
12-11 449
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。 ...
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版本，这是一个更新到最新状态的库，确保了你能够获得最新的...
超棒的跨浏览器纯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
weixin_55747430的博客
05-10 3947
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。一、安装使用安装二、基本用法1.使用方式三、keyframes关键帧 前言 Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。 官方学习文档网址 一、安装使用 安装 使用 npm 安装： $ npm install animate.css -.
如何使用animate.css动画库
qczzc的博客
05-21 5215
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
【css】使用Animate.css
weixin_46590928的博客
11-19 2425
自定义预设动画类的属性。}通过js代码修改css变量 // All animations will take twice the time to accomplish document . documentElement . style . setProperty('--animate-duration' , '2s');
vue学习笔记day19 动画之animate.css库使用
weixin_39209728的博客
03-08 565
一 vue的过渡 （动画） 2》利用css动画库 (animal.css) bower install animate.css 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...
针对CSS Animation的综合笔记
CoffeeAndIce的博客
09-26 543
主要针对css animation的各种属性罗列，避免重翻查定义和内容。
wow.js实现各种动画特效
Sumshine12.5
02-25 4439
下载地址 https://www.bootcdn.cn/wow/ 官方网站 https://www.delac.io/wow/ WOW.js用于设置用户滚动页面时触发各种CSS动画，WOW.js需和animate.css配合使用 animate.css演示地址：https://www.dowebok.com/demo/2014/98/ GitHub 使用方法 1.引入animate.css &lt...
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的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
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、付费专栏及课程。

余额充值