animate.css动画库的使用

animate.css介绍

内置了许多的CSS3动画,兼容性很好。

用法:
  1. 引入animate.css
  2. 下载地址: https://raw.github.com/daneden/animate.css/master/animate.css
  3. 在要动画的元素上添加 animated 类,并添加特定的动画类名

如:
添加了animated、bouce类

<head>
    <link rel="stylesheet" href="animate.css">
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 10px auto;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
        }
    style>
head>
<body>
    <div class="box">
        <div class="item animated bounce">div>
    div>
body>

animate.css动画库的使用_第1张图片

效果:
红色方块上下晃动几下后停止。

效果展示:

 点击下面的链接可以查看animate.css中每个类的效果。

http://htmlpreview.github.io/?https://github.com/wushanshan5/WSSCases/blob/master/H5andC3/animate.cssStyle/index.html

下面将列举每个类:

类名:

special

  • bouce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • hinge
  • jackInTheBox

bounce

  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp

fade

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig

light

  • lightSpeedIn
  • lightSpeedOut

rotate

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

roll、zoom

  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

slide

  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp
  • slideOutUp

flip

  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY

你可能感兴趣的:(CSS)