Animate.css 纯CSS动画库

最新推荐文章于 2020-04-26 08:42:03 发布
最新推荐文章于 2020-04-26 08:42:03 发布
阅读量117 收藏
点赞数
原文链接：https://my.oschina.net/yangyan/blog/601573
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

github上的地址是： https://daneden.github.io/animate.css/


Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

基本的使用方法

  1. 引入css文件到 <head> 标签中 

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

  2. 给你想让执行动画的元素的class添加animated. 你还可以添加 infinite这个样式让动画无限循环.

  3. 最后你给元素添加下面的一个class，就可以实现不同的动画效果:

    • 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
    • flipInY
    • flipOutX
    • flipOutY
    • lightSpeedIn
    • lightSpeedOut
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • hinge
    • rollIn
    • rollOut
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp

例子: 

<h1 class="animated infinite bounce">Example</h1>

查看所有的动画效果



转载于:https://my.oschina.net/yangyan/blog/601573

weixin_34212189
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
animate.css的使用——老板再也不用担心我没有特效了！
weixin_42855542的博客
12-13 2368
animate.css—— 一款强大的预设css3动画库！ 你还在使用hover？还在自己写动画帧? 一个人的脑洞总是有限，让我们一起来看看一仓库的创意，从中启发属于你的动画效果！！！ animate.css体验（附带下载）：https://daneden.github.io/animate.css/ 或这git下载：https://github.com/daneden/animate.css 使...
Animate.css(一款有意思的CSS3动画库)
12-04 163
官网：https://daneden.github.io/animate.css/ animate.css是一款跨浏览器的动画库。 使用方式： 在页面的<head>中引入样式文件： <head> <link rel="stylesheet" href="animate.min.css"> </head> ...
33.Vue-使用第三方animate.css类库实现动画
DevOps海洋的渔夫@专栏
04-26 951
概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 上一篇说明了使用过渡类名来实现动...
animate.css动画库的使用详解
@必意玲
12-22 6242
animate.css是一套官方自己定义好的动画库，引入css文件后，直接使用类名即可实现自己想要的css动画效果。 1. 页面添加animate.css文件：https://daneden.github.io/animate.css/ &lt;link rel="stylesheet" href="./animate.css"&gt; 2. 获取自己想要的类样式效果，F12注意看类变化效果...
强大而酷炫的CSS3动画库Animate.css使用方法
尐轩web前端网络日志
12-23 1万+
今天介绍一个强大的CSS3库 Animate.css 库如其名 ，是一个动画库 通过它我们非常轻松地添加动画效果 “Just-add-water CSS animations” 像灌水一样简单 我们只需要添加几个类名 下载地址及动画效果戳这里：Animate.css 使用这个库只需要把animate.css引入我们的文件即可<link rel="stylesheet" href="s
animate(CSS动画库)
07-15
Animate.css 是一个强大的开源CSS动画库，它提供了一系列预先定义好的动画效果，使得开发者无需从零开始编写复杂的CSS代码，就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计，提升用户体验，吸引用户...
wow.min.js和animate.css
04-20
"animate.css"则是一个预定义的CSS3动画库，包含了大量的动画效果，如淡入淡出、滑动、旋转等。开发者可以通过简单地添加类名到HTML元素上，就能轻松实现各种炫酷的动画效果。这些动画效果都是基于现代浏览器支持的...
animate.css动画库，汉化注释
12-04
一个css大神制作的成品的动画库，对控件动画有效，我做了测试和动画效果注释汉化。因为不是自己的东西，就不要分了，当然百度的静态资源库应该也是有的，不过对于初学者，注释还是很有必要的。截止2015年12月1号的...
animate.css-4.1.1.zip
02-03
Animate.css是一个CSS3动画库，它使得在网页上添加复杂的动画变得简单快捷。通过在HTML元素上直接应用预定义的类名，就可以轻松实现各种动态效果，如淡入淡出、滑动、旋转、放大缩小等。这极大地简化了开发者的工作...
vue 1.0 结合animate.css定义动画效果
10-18
在Vue 1.0中，实现自定义动画效果可以借助CSS3动画库，如animate.css。animate.css提供了丰富的预定义动画效果，可以帮助开发者快速创建出各种动态效果。下面将详细介绍如何在Vue 1.0项目中结合animate.css来定义...
animate.css (css3的库之一 )
Cream_Cicilian的博客
05-03 394
代码效果：代码效果 @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2017 Daniel ...
动画学习之Animate.css的使用与解析
热门推荐
沉淀
07-30 3万+
近况近期生活比较单一。 const 提升自己 = true; while( 提升自己 ) { 写码 ... 看书 ... 思考 ... 睡觉 }既单一也充实，单一使我平静，充实使我保持向上的感觉，希望自己真难做到“持续学习，保持思考，不断进步”。最近看到腾讯ISUX团
animate.css
golden_wheat
12-06 335
animate.css animate.css是一个css3动画库 今天上网搜了一下，对animate.css有一个简单的了解 1、怎么使用animate.css 首先下载animate.css       https://daneden.github.io/animate.css/ 其次:                     接下来             $("butto
vue学习（十八） animate.css使用
qq_36305027的博客
11-06 153
1，下载animate.css https://daneden.github.io/animate.css/   2,代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit
一款非常好用的css动画库--animate.css
阳菜
09-07 4160
今天再学习vue.js的时候看到了一个不错的css库，vue官方推荐（不一定要使用vue.js才能使用这个css库），这个库叫做animate.css，是个动画效果的css库，有好多不错的动画效果。 首先看怎么引用， 官网下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css 效果试用：https...
css3关于animate动画的使用
一只前端小白的博客
02-28 2699
关于animate动画语法： animate：动画名称 花费时间 运动曲线 等待时间 播放次数(无限播放) 是否反向播放 animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在...
不错的一款基于CSS 3的按钮动画库Animate.css
小李专栏
12-26 4234
目前Animate.css只能在Apple Safari, Google Chrome, and Mozilla Firefox中运行，不过微软承诺未来的IE10会支持CSS 3。 从目前看，使用Animate.css制作的动画性能要高于JQuery，因此，如果你的客户不纠结于IE的话，使用Animate.css吧~ 项目主页：http://daneden.me/animate/自定义
Animate.css简单使用
CSDN技术支持
11-13 1053
引入animate.css文件 1.网络引用  &lt;link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"&gt; 2.下载css https://daneden.github.io/animate.css/，下载并保存为css文件 使用...
css3动画
a976134036的博客
06-21 204
1.animate.css https://daneden.github.io/animate.css/ 2.velocity.js http://velocityjs.org/
animate.css 动画完成后
最新发布
09-15
animate.css是一个非常流行的CSS动画库，它提供了许多动画效果，可以轻松地为网页添加动画效果。当animate.css动画完成后，会触发一个名为"animationend"的事件。 在动画完成后，我们可以利用这个事件来执行一些其他的动作或调整其他元素的样式。例如，我们可以通过JavaScript来监听"animationend"事件然后执行一些自定义的操作。 例如，当动画完成后，我们可以移除或隐藏该元素，或者根据需要修改它的样式。我们可以使用JavaScript的DOM操作方法来实现这些操作。 示例代码如下： ``` const element = document.getElementById("animatedElement"); // 监听animationend事件 element.addEventListener("animationend", function() { // 在动画完成后执行一些操作 element.style.display = "none"; }); ``` 在上面的示例中，我们将一个元素绑定到一个具有id为"animatedElement"的HTML元素。当该元素执行完成动画后，"animationend"事件将触发，并隐藏这个元素。 总之，animate.css为我们提供了快速方便的CSS动画效果，并且我们可以通过监听"animationend"事件来在动画完成后执行自定义的操作。通过使用这个事件，我们可以进一步提高用户体验，并实现更丰富的交互效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值