animate.css动画样式详解

2024-05-14 01:35:46

一、使用步骤

<!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/animate-3.1.0.min.css"> -->
<link rel="stylesheet" href="animate.css">
<div class="animated bounceInLeft">从左边进入</div>

使用详细步骤：https://www.dowebok.com/98.html

二、属性

1、Attention Seekers
bounce：弹跳
flash：闪烁
pulse：脉冲（放大然后回到正常大小）
rubber：橡皮筋
Band
shake：摇（左右）
swing：摇摆（上下，以中心为原点）
tada：（缩小然后摇摆，幅度比较小）
wobble：摇晃（左右和上下都有，即沿着一个弧移动，比较快）

jello：果冻（像果冻一样抖动）
2、Bouncing Entrances(弹跳进入页面的动画)
bounceInLeft
bounceOutLeft
bounceInRight
bounceOutRight
bounceInDown
bounceOutDown
bounceInUp
bounceOutUp

3、Bouncing Exits(弹跳离开页面的动画)
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

4、Fading Entrances(颜色逐渐加深进入页面的动画)
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig

5、Fading Exits(颜色逐渐变淡离开页面的动画)
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

6、Flippers（翻动效果）
flip
flipInX
flipInY
flipOutX
flipOutY

7、Lightspeed(倾斜同时fade的进入进出效果)
lightSpeedIn
lightSpeedOut

8、Rotating Entrances(回转进入)
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

9、Rotating Exits（回转出去）
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

10、Sliders
slideInDown
slideInLeft
slideInRight
slideOutLeft
slideOutRight
slideOutUp

11、Specials特殊效果
hinge
rollIn
rollOut

演示：https://www.dowebok.com/demo/2014/98/

animate.css动画样式详解相关推荐

CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
css动画（详解带图）
css动画过渡过渡 (transition)的作用常用属性实例动画动画的简介设置关键帧动画常用属性实例变形变形(transform)的简介常用属性(transform) Z轴平 ...
CSS 列表样式详解
CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在HTML中,有两种类型的列表: 无序列表 - 列 ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习课程介绍一.本课程几乎包括所有canvas常用的api用法讲解二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...

最新文章

热门文章