zoukankan      html  css  js  c++  java
  • Animate..css的一些属性使用

    使用基本的代码

    <!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打开这个看每一个的属性的特效

  • 相关阅读:
    idea 安装lombok 插件过程
    typora快捷键之速成笔记
    Android端抓取日志
    接口测试Case之面向页面对象编写及规范
    Jenkins + jmeter + ant + git 自动化集成
    自动化测试使用流程
    Jenkins git 的配置及问题解决
    传智springMVC笔记
    session 原理 数据结构
    Redis 3.0 集群搭建
  • 原文地址:https://www.cnblogs.com/easyjie/p/12893692.html
Copyright © 2011-2022 走看看