使用基本的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<link rel="stylesheet" href="css/animate.compat.css">
</head>
<body>
<div class="animated fadeInLeft">111212</div>
</html>

属性如下:

bounce 弹起;反弹
flash 闪光
pulse 脉冲
rubberBand 橡皮圈
shakeX x动摇
shakeY y动摇
headShake 摇头
swing 摇摆;悬挂
tada
wobble 摇摆
jello
heartBeat 跳动

Back entrances 回到入口

backInDown
backInLeft
backInRight
backInUp

Back exits 后退

backOutDown
backOutLeft
backOutRight
backOutUp

Fading entrances 淡入入口

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight

Fading exits 淡入退出

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft

Flippers

flip
flipInX
flipInY
flipOutX
flipOutY

Lightspeed

lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft

Rotating entrances 旋转入口

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

Rotating exits 选择退出

rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

Specials

hinge
jackInTheBox
rollIn
rollOut

Zooming entrances 上升入口

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

Zooming exits 上升出口

zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Sliding entrances 滑;移动 出口

slideInDown
slideInLeft
slideInRight
slideInUp

Sliding exits 滑;移动入口

slideOutDown
slideOutLeft
slideOutRight
slideOutUp

这些属性可以自己去试试,可以去更改一下,很简单的,自己调用的一个库

http://www.jq22.com/yanshi819打开这个看每一个的属性的特效

Animate..css的一些属性使用的更多相关文章

  1. CSS3动画库——animate.css

    初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...

  2. animate.css(第三方动画使用方法)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

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

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

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

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

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

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  6. JQuery插件之Animate.css和 jquery-aniview

    Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...

  7. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  8. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  9. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

随机推荐

  1. Earmaster——音乐爱好者必备软件

    有很多喜爱音乐但是却由于一些"不可抗力"而没能学习到音乐基础的小伙伴,相信你们在自学乐器或是声乐的时候总会因为基础不扎实而看不懂一些复杂的乐谱,换别的曲子练习之后发现依旧看不懂,由 ...

  2. 两款超好用的Mac读写ntfs软件推荐给大家

    活中我们免不了会使用一些硬盘设备来存储文件或者是数据,然而绝大多数的移动硬盘都是ntfs格式.Mac读写ntfs软件有很多,究竟哪一款适合我们? 首先,我们一起了解一下什么是ntfs格式.ntfs,是 ...

  3. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  4. 肝了一周的 UDP 基础知识终于出来了。

    我把自己以往的文章汇总成为了 Github ,欢迎各位大佬 star https://github.com/crisxuan/bestJavaer 已提交此篇文章 运输层位于应用层和网络层之间,是 O ...

  5. CSS3 学习笔记(上)

    一.CSS简介 CSS(Cascading Style Sheets)层叠样式表.其中,样式定义为如何显示HTML元素,它通常储存在样式表,将样式添加到HTML中,能够解决内容与表现分离的问题.由于网 ...

  6. 1.Cobaltstrike 安装与简介

    1.Cobaltstrike 安装与简介 一.简介 Cobalt Strike是一款美国Red Team开发的渗透测试神器,常被业界人内称为CS.自去年起, Cobaltstrike升级到3.0版本, ...

  7. 一枚程序猿的MacBook M1详细体验报告

    前言 2020年11月11日双十一上午,苹果发布了M1芯片的新款Mac,其最大的变化就是将处理器从Intel换成了苹果自研的ARM芯片M1. 上一次苹果更换Mac芯片要追溯到2006年,14年前,苹果 ...

  8. Fist—— 团队展示

    作业要求 软件工程1班 团队名称 Fist 这个作业的目标 团队合作开发项目,加强团队合作,进一步了解相应岗位. 作业正文 https://www.cnblogs.com/team4/p/137730 ...

  9. 【2020.12.03提高组模拟】A组反思

    估计:40+10+0+0=50 实际:40+10+0+0=50 rank40 T1 赛时看到\(n,m\leq9\),我当机立断决定打表,暴力打了几个点之后发现在\(n\ne m\)且\(k\ne0\ ...

  10. IAR编译出现Configuration is up-to-date.

    IAR编译出现如下: Building configuration: SimpleBLECentral - CC2541EM Updating build tree... Configuration ...