css3 动画工具 Animate.css

最新推荐文章于 2022-05-11 19:47:03 发布
最新推荐文章于 2022-05-11 19:47:03 发布
阅读量438 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/115861077
版权

Animate.css官网:https://animate.style/

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

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

</html>

在 vue 中使用
// index 中 走cdn 加速

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

npm install animate.css --save


import 'animate.min.css';

// App.vue

  <transition
    name="custom-classes-transition"
    enter-active-class="animated bounce"
    leave-active-class="animated bounceOutRight"
  >
      <router-view></router-view>
      <router-view class="view two" name="a"></router-view>
      <router-view class="view three" name="b"></router-view>
  </transition>

参考:https://cn.vuejs.org/v2/guide/transitions.html

web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
强大的CSS3动画库animate.css 50多种动画形式
08-02
animate.css定义了大概50多种动画形式，包括淡入淡出，文字飞入、左右摇摆动画等等。使用animate.css也非常简单，你可以给页面上的任意元素，特别是文字添加各种神奇的动画特效。
CSS动画库——animate.css的使用
weixin_30608131的博客
08-12 156
Animate.css是一款强大的CSS3动画库 官网地址：https://daneden.github.io/animate.css/ 使用方法如下所示： （1）下载animate.css 下载地址：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css 下载完成后，可以保存在项目需要引...
第三方动画库animation.css
热门推荐
Liberty_yes的博客
01-29 2万+
vue动画，css动画，使用第三方动画库animation.css轻松实现多种动画炫酷的效果！
animate.min.css动画特效
04-08
Animate.css是某位大牛写好的动画效果集合，需要的时候可以直接下载导入到项目中，在需要的元素上添加相关的类即可使用相对应的动画效果。
animate.css在Vue中的使用
weixin_46435234的博客
08-04 1435
# Vue集成第三方动画库 animate.css官网链接：https://animate.style/ 安装： npm install animate.css --save 在项目种引入 import "animate.css" 使用animate.css 给transition标签添加上固定的name属性 按需求添加上 enter-active-class="官网上自己找动画值" =》进入动画的过程 leave-acitve-
animate.css一款简洁的css动画库
qq_33460264的博客
07-16 456
官网：https://animate.style/ 演示：https://www.dowebok.com/demo/2014/98/
【踩坑笔记】animate.css无效【非版本问题】
普通程序员的随笔
05-17 3567
之前看前端杂志了解到animate.css动画库，于是决定去学习一下。谁知道遇到了非常多的坑，也很少有博客记录了我这种问题，在此留下笔记，希望能帮到遇到同样问题的人。 初识 首先是animate.css官网。 不知道你们进去是怎么样的，反正我第一次进去后发现页面的动画效果全部都失效，点右边的什么东西都没有作用。起初我还以为是官网的bug，通过百度去找了其他的效果展示网站来代替，就像这个www.dowebok.com。 那时候的我天真的以为这是什么官网的bug，导致官网效果展示不出来。这也导致了我后面学习.
animate.css官网
weixin_30668887的博客
04-27 1923
https://daneden.github.io/animate.css/ 转载于:https://www.cnblogs.com/answercard/p/6775036.html
animate.css 官方,animateCSS
weixin_32536777的博客
08-03 2286
animateCSS是什么什么是animateCSS，Animate CSS jQuery PluginanimateCSS官网：官网animateCSS文档：文档animateCSS源码仓库：源码仓库animateCSS下载地址：点此下载 点此下载2animateCSS介绍、animateCSS使用A jQuery plugin to dynamically apply Dan Eden's a...
wow.min.js和animate.css
04-20
css动画效果 wow插件需要的wow.min.js和animate.css
animate.css动画库，汉化注释
12-04
一个css大神制作的成品的动画库，对控件动画有效，我做了测试和动画效果注释汉化。因为不是自己的东西，就不要分了，当然百度的静态资源库应该也是有的，不过对于初学者，注释还是很有必要的。截止2015年12月1号的...
超棒的跨浏览器纯CSS动画实现 Animate.css使用方法
09-25
在今天的这篇文章中，我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester， UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果
动画库-animation.css
sinat_41292836的博客
05-21 2047
3.1简介 animate.css是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达60多种动画效果，几乎包含了所有常见的动画效果。 虽然借助animate.css能够很方便、快速的制作CSS3动画效果，但还是建议...
很好用的CSS3动画库animate.css
Welcome To My Home
12-12 605
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。 github官网：https://raw.github.com/daneden/animate.css/master/animate.css 头部引入： <link rel="stylesheet" href="https://cdnjs.cloudfl...
一款非常好用的css动画库--animate.css
阳菜
09-07 4134
今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。 首先看怎么引用， 官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css 效果试用：https...
animate.css 动画库的下载与使用
WangMin@汪末末
09-16 2223
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin animate.css是什么？ animate.css 是一个有趣，酷炫的，跨浏览器的动画库，里面包含了许多常用的css动画。你可以将它用于你的项目中，不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。 我们要使用的它的话需要把它加到自己的页面中，接着就可以在需要动画的元素标签上直接调用里面的动画，然后调节动画次数延迟等达到自己需要的效果就可以了。 怎么获取 animat
常用第三方工具库
狡辉两门的博客
05-11 1523
第三方库概览 名称 文档 一句话介绍 jQuery 官网：https://jquery.com/中文网：https://jquery.cuishifeng.cn/ 让操作DOM变得更容易 Lodash 官网：https://lodash.com/docs中文网：https://www.lodashjs.com/ 你能想到的工具函数它都帮你写了 Animate.css 官网：https://animate.style/ 常见的CSS动画效果都帮你写好了 Axios 官网：https
css 实现半圆弧度
web修理工
06-15 2691
border-radius: 50% 50% 0 0/50% 100% 0 0;
vue3使用Animate.css
最新发布
07-15
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 文档中找到更多可用的动画效果。 希望这个回答能够帮助你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值