Animate.css 基本使用

最新推荐文章于 2024-08-07 15:34:36 发布

小k铁柱

最新推荐文章于 2024-08-07 15:34:36 发布

阅读量866

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_40890601/article/details/117928700

版权

安装

npm

npm install animate.css --save

yarn

yarn add animate.css

CDN

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

基本使用

安装后别忘记在 main.js 里引入 import ‘animate.css’
首先在需要动画的元素上加类 animate__animated，再加对应的动画，别忘记 animate__前缀

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

在这里插入图片描述
延迟时间 animate__delay-xs 例如

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

动画速度

animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms

<div class="animate__animated animate__bounce animate__faster">Example</div>

重复次数
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite //循环

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

更多用法见官网
Reference: https://animate.style/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小k铁柱

关注关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

超棒的跨浏览器纯CSS动画实现 Animate.css使用方法

12-13

通常情况下如果需要生成web动画效果的话，我们肯定会考虑使用一些类库或者jQuery的animate方法，那么有什么方便的方法来快速实现动画效果呢？在今天的这篇文章中，我们将介绍一个超棒的CSS动画实现方式 – Animate.css。这套CSS动画是由来自Manchester， UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果 Animate.css在线演示 http://demo.jb51.net/js/2012/Animatecss/Animate.css下载地址 https://www.jb51.net/jiaoben/62726.html

Animate.css的使用（基本使用附css文件下载地址）-附件资源

03-02

Animate.css的使用（基本使用附css文件下载地址）-附件资源

3 条评论您还未登录，请先登录后发表或查看评论

animate.css的使用

weixin_33933118的博客

08-16

192

前面的话　　animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用引入　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法　　1、从官网下载　　https://raw.github.com/daneden/a...

使用Animate.css插件快速实现css动画，超简单教程

最新发布

weixin_43472754的博客

08-07

350

（1）首先去官网选择喜欢的动画并复制，此时复制的是动画类名。2.安装Animate.css插件。3.在main.js文件中引入插件。

animate.css使用

兵临城下的专栏

08-17

1144

直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>app下载</title> <link href="css/animate.min.css" type="text/css

Animate.css的使用

zh15930366635的博客

05-09

3277

引入方法一：从官网下载：　https://raw.github.com/daneden/animate.css/master/animate.css 方法二：通过npm安装 npm install animate.css 方法三：使用在线cdn https://unpkg.com/animate.css@3.5.2/animate.min.css 基础用法安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记anima

animate.css-4.1.1.zip

02-03

这里，`animated`是Animate.css的基本类，用于开启动画功能，而`fadeIn`则是具体的动画效果。 Animate.css还支持自定义动画持续时间和延迟，你可以通过附加`.duration-5s`或`.delay-2s`这样的类来调整。例如，如果...

vue过渡和animate.css结合使用详解

08-30

我们了解了 Vue 过渡的基本概念和 Animate.css 的使用方法，并学习了如何使用 Animate.css 来实现过渡动画。同时，我们还学习了如何使用 `transition` 和 `transition-group` 元素来实现过渡动画。

animate.min.css动画特效

04-08

Animate.min.css是一个非常实用的CSS库，专门用于创建各种丰富的动画效果。这个库是由开发者Daniel Eden精心设计和编写的，它极大地简化了在Web开发中添加动态视觉效果的过程。通过在HTML元素上简单地应用预定义的...

jQuery封装animate.css的实例

10-18

### 四、使用封装的animateCss方法现在你可以像下面这样调用封装好的方法来触发动画： ```javascript $('#box').animateCss('bounce'); ``` 这将使得`#box`元素立即开始执行`bounce`动画，并在动画结束后自动移除...

css3强大的动画效果animate使用说明及浏览器兼容介绍

12-03

好久没更新blog，上次发文（11月8日）到现在刚好一个月，期间项目上的东西比较多，一时觉得时间比较紧，没来得及更新。这个星期总算是告一段落，补上几篇技术性的文章。好吧，第一篇是关于css3动画的使用。昨天突然看到jing.fm（这个音乐网站非常不错，很多效果我都很喜欢，如果你有兴趣，可以去围观下）上音乐播放时，专辑的转动效果很不错，所以准备自己动手写下，以备后用。结果第一次使用animate就遇到了坑爹的事情，特吐槽下。一、最终的效果如上图所示，最终是想让这个专辑的图片转动起来，模拟出唱片播放的效果（你可以去jing.fm上看看真实的效果，很赞，现在很多音乐网站都添加了这个效果）。二

Animate.css使用方法

qq_51649346的博客

06-01

7115

使用npm安装 1.2导入Animate.css文件官网搬运代码见另一个博客Animate.css大部分情况下用这种，比较方便 2.Animate.css的使用 Animate.css基本用法之前的animate.css用法，只需要在class里加上animated +动画名称就可以使用了，但现在animate.css已经更新了官方文档，现在的使用方法如下: 从Animate.css版本4开始，可以自定义属性来定义动画的持续时间、延迟、迭代

Animate.css 教程

weixin_34006965的博客

07-12

1339

animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。基本用法引入CSS文件这个对你来说应该再容易不过了，我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。你只需要在HTML文件的head标签中引入CSS样式文件，如下： <...

Animate.css动画库的使用

Jimmy的前端博客

04-10

3263

第一：下载地址 https://github.com/daneden/animate.css 第二：animate.css是一个很灵活的基于css3动画跨浏览器的css动画库，在你的项目中可以起到意想不到的作用安装方法：bower安装：$ bower install animate.css --savenpm安装：$ npm install animate.css --save基本使用方法：1.引...

Animate.css介绍

weixin_30795127的博客

05-02

123

Animate.css简介 animate.css 动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。 Animate.css下载百度云盘下载链接 Animate.css动画演示演示地址 Anim...

vue2使用animate.css

10-02

在Vue2中使用animate.css，你可以按照以下步骤进行操作: 1. 在终端中使用npm命令安装animate.css库: ``` npm install animate.css --save ``` 2. 在你的main.js文件中引入animate.css: ```javascript import 'animate.css'; ``` 3. 在组件中使用animate.css的类来实现动画效果。例如，在一个按钮上添加bounce动画效果: ```html <template> <button class="animate__animated animate__bounce">Click me</button> </template> ``` 4. 如果你想在过渡效果中使用animate.css来实现动画，你可以使用Vue的过渡组件和animate.css的类。例如，在一个切换动画中使用zoomIn和zoomOut效果: ```html <template> <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut"> <div v-if="isShow" class="box"></div> </transition> </template> ``` 以上是在Vue2中使用animate.css的基本步骤。你可以根据你的具体需求来选择并应用animate.css中提供的各种类和动画效果。