Animate.css 教程

animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中。不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果。

基本用法

引入CSS文件

这个对你来说应该再容易不过了,我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件,如下:

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

辅助类

给你想添加动画效果的元素添加一个 animated 类(必需)。如果需要动画循环运动,你还需要给这个元素追加 infinite 类,又或者自己另外定义一个类似于 infinite 的类。

效果添加

接下来就是最后一步了,最激动人心,也是最重要的一步,为元素添加你想要的效果所对应的类名就大功告成了。下面我就列出来,你大可随便挑,随便选。

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>

你可以通过这里来体验 Animate.css 的强大效果:https://daneden.github.io/animate.css/

进阶用法

正如上面所说的,把 animate.css 用到你的网站项目中,你只需要简单地把下面的这一行代码扔到你页面的head 标签里就可以了,接着就是给目标元素添加一个 animated 类。就这样!你就可以得到一个酷炫的动画效果了。

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

jQuery 基本用法

你还可以通过 jQuery 或者自己定义的 CSS 规则来给目标元素一次性添加对应效果的 class 类。

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

你还可以监听动画事件是否已经执行完毕,并执行回调函数。

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

扩展 jQuery

你还可以通过扩展 jQuery 来实现自己想要效果。

$.fn.extend({
animateCss: function (animationName) {
var animationEnd = ‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘;
$(this).addClass(‘animated ‘ + animationName).one(animationEnd, function() {
$(this).removeClass(‘animated ‘ + animationName);
});
}
});

可以像下面这样使用

$(‘#yourElement‘).animateCss(‘bounce‘);

动画延时

你还可以改变动画运动时间,添加动画延迟,或者直接修改默认配置的数字。

#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}

使用的时候记得把CSS样式中的“vendor”用相应的前缀替换掉(webkit, moz, etc)。

定制构建

gulp.js 管理

Animate.css是通过 gulp.js 管理,你可以很轻易地创建自定义构建,首先你需要的就是一个Gulp

$ cd path/to/animate.css/
$ sudo npm install

gulp.js 用法

接下来就是执行 gulp 来完成你的自定义构建。例如,如果你只想使用里面的一些效果,你就可以简单的编辑 animate-config.json 来选择你想要的效果代码就好了。

"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}
时间: 2024-10-11 11:06:06

Animate.css 教程的相关文章

React 系列教程 1:实现 Animate.css 官网效果

前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作.这对于学习 React 来说是一个非常简易的例子,但是我并不会在教程中介绍相关的前置知识,比如 JSX.ES6 等,对于小白来说可能还会有一些困惑的地方,所以还要了解一下 React 相关的基础知识.虽然 React 有很多值得深究的知识,但这个系列教程并不会涉及高大深的内容

JQuery插件之Animate.css和 jquery-aniview

Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

齐全的CSS3动画库animate.css

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 查看演示

Animate.css让添加CSS动画像喝水一样容易

animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用.用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了. 用法 在您的网站上使用animate.css,只要简单地把样式表插入到文档中的<HEAD>中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称.就是这样!你就有了一个CSS动画效果.超强! <head>   <link rel="stylesheet" href="animat

在vue中使用animate.css

animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: import $ from '../assets/js/jquery.js'; import animate from 'animate.css' 最后绑定元素使用: <template> <div class="song"> <p id="f&quo

css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢. 从广义上

animate.css

这是个css3动画框架,现在很流行,在小动画效果有很多,使用的方式 <div class="animated bounce"></div> /*只要修改bounce这个类就可以*/ 一.atention Seekers 1.bounce 2.flash 3.pulse 4.rubberBand 5.shake 6.swing 7.tada 8.wobble 9.jello 二.Bouncing Entrances  1.bounceIn 2.bounceInDo

使用Animate.css和wow.js,实现各大网站常用的页面加载动画

经常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画. 主要区别于在普通页面是在页面加载完成后所有动画一起动,或者设置延迟时间. 而这两个插件混搭使用可以是页面现在到该元素时才加载动画.拥有非常不错的效果. 算个比较常见的交互效果,研究了一下午,主要使用以下两个插件完成. 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css 非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 用法: <link