animate.css
/
animate.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style>
	body{overflow:hidden;}
	*{font-size:14px;}
	input{font-size:12px;width:100%;border:1px solid #ccc;line-height:25px;color:#666;}
	p{line-height:25px;color:#333;}
	.tip{width:50px;height:50px;background:#6CF;margin:40px auto;}
	.cell{float:left;text-align:center;margin:0 20px;}
	.ipt{width:90px;text-align:center;}
</style>
</head>

<body>
	<div class="cf">
        <div class="cell">
            <p>从上往下渐显</p>
            <input class="ipt" type="text" value="showInTop" />
            <div class="tip showInTop a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>从下往上渐显</p>
            <input class="ipt" type="text" value="showInBottom" />
            <div class="tip showInBottom a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>从右往左渐显</p>
            <input class="ipt" type="text" value="showInRight" />
            <div class="tip showInRight a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>从右往左移动</p>
            <input class="ipt" type="text" value="showRight" />
            <div class="tip showRight a-time1 a-yj"></div>
        </div>

		<div class="cell">
            <p>从上往下移动</p>
            <input class="ipt" type="text" value="showTop" />
            <div class="tip showTop a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>从左往右渐显</p>
            <input class="ipt" type="text" value="showInLeft" />
            <div class="tip showInLeft a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>从左往右移动</p>
            <input class="ipt" type="text" value="showLeft" />
            <div class="tip showLeft a-time1 a-yj"></div>
        </div>


        <div class="cell">
            <p>渐显，反向：a-yjfx</p>
            <input class="ipt" type="text" value="fadeIn" />
            <div class="tip fadeIn a-time1 a-yjfx"></div>
        </div>

        <div class="cell">
            <p>渐显，无反向</p>
            <input class="ipt" type="text" value="fadeIn" />
            <div class="tip fadeIn a-time1"></div>
        </div>

        <div class="cell">
            <p>从小变大</p>
            <input class="ipt" type="text" value="zoomIn" />
            <div class="tip zoomIn a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>从大变小</p>
            <input class="ipt" type="text" value="inZoom" />
            <div class="tip inZoom a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>上下跳动</p>
            <input class="ipt" type="text" value="shangxia" />
            <div class="tip shangxia a-time1 a-yj a-yjfx"></div>
        </div>

        <div class="cell">
            <p>上下跳动-缓冲</p>
            <input class="ipt" type="text" value="bounce" />
            <div class="tip bounce a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>顺时针转圈</p>
            <input class="ipt" type="text" value="zhuanquan" />
            <div class="tip zhuanquan a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>逆时针转圈</p>
            <input class="ipt" type="text" value="zhuanquan-ni" />
            <div class="tip zhuanquan-ni a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>橡皮筋</p>
            <input class="ipt" type="text" value="rubberBand" />
            <div class="tip rubberBand a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>shake</p>
            <input class="ipt" type="text" value="shake" />
            <div class="tip shake a-time1 a-yj"></div>
        </div>

        <div class="cell">
            <p>meteor</p>
            <input class="ipt" type="text" value="meteor" />
            <div class="tip meteor a-time1 a-yj"></div>
        </div>
    </div>

<!--退场动画-->
<p class="mb10">退场动画</p>
<div class="cf">
	<div class="cell of">
        <p>从左往右退出</p>
        <input class="ipt" type="text" value="outRight" />
        <div class="tip outRight a-time1 a-yj"></div>
    </div>
    <div class="cell of">
        <p>从右往左退出</p>
        <input class="ipt" type="text" value="outLeft" />
        <div class="tip outLeft a-time1 a-yj"></div>
    </div>
	<div class="cell of">
        <p>从下往上退出</p>
        <input class="ipt" type="text" value="outTop" />
        <div class="tip outTop a-time1 a-yj"></div>
    </div>
    <div class="cell">
        <p>从上往下退出</p>
        <input class="ipt" type="text" value="outBottom" />
        <div class="tip outBottom a-time1 a-yj"></div>
    </div>
	<div class="cell">
		<p>从上往下渐隐</p>
		<input class="ipt" type="text" value="hideToBottom" />
		<div class="tip hideToBottom a-time1 a-yj"></div>
	</div>
	<div class="cell">
		<p>渐隐</p>
		<input class="ipt" type="text" value="fadeOut" />
		<div class="tip fadeOut a-time1 a-yj"></div>
	</div>
</div>

</body>
</html>