animate.css-very cool css3 third-party library special effects-paste demo

<!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>animate.css_Demo_1812139219</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="animate.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">

    #test {
        text-align: center;
        background: #39c;
        padding: 10px;
        width: 180px;
        color: #fff;
        margin: 0 auto;
        text-shadow: 0 1px 0 rgba(0,0,0,.3);
        background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        border-radius: 5px;
        border: 1px solid #17a;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
        font-weight: bold;


        /*css3 style properties*/
        /*//Must be added, animation-duration is used to specify the duration of the animation for the element*/
        animation-duration: 1s;
        /*//Number of cycles, infinite is an infinite number of cycles. */
       animation-iteration-count:7;
        /*animation-delay: .2s; is used to specify the start time of element animation*/
        /*animation-timing-function: ease; means that the element changes the transformation rate of the property value according to the advancement of time. To put it simply, it is the way the animation is played. It has the following six transformation modes: ease; ease-in; ease-in-out; linear; cubic-bezier. */
        /*animation-fill-mode: both;*/
    }
   .test{
   	 text-align: center;
        background: #39c;
        padding: 10px;
        height:220px;
        width: 380px;
        color: #fff;
        margin: 0 auto;
        text-shadow: 0 1px 0 rgba(0,0,0,.3);
        background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        border-radius: 5px;
        border: 1px solid #17a;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
        font-weight: bold;


        /*css3 style properties*/
        /*Must be added, animation-duration is used to specify how long the element will play animation*/
        animation-duration: 3s;


        /* Number of loops, infinite is an infinite loop. */
        animation-iteration-count:5;


        /*animation-delay: .2s; is used to specify the start time of element animation c43 Zhang Feng*/
        /*animation-timing-function: ease; means that the element changes the transformation rate of the property value according to the advancement of time. To put it simply, it is the way the animation is played. It has the following six transformation modes: ease; ease-in; ease-in-out; linear; cubic-bezier. */
        /*animation-fill-mode: both;*/
   }
</style>
<script>
$(function(){

	$('input').hover(function(){

                $('#test').addClass('bounce');
            },function(){
                $('#test').removeClass('bounce');
            });
})

</script>
</head>

<body>
	<div id ="test" ></div>

	<br />
	<div class="test zoomOutUp">

        1. Introduce the animate.css style library
        <br />
        2. The element style must include the css3 attribute animation-duration: 1s;
		Or add class animated to the target element
         <br />
		3. For the target element, add the desired animation class. Such as flash/pulse, bounce, shake, tada, swing, wobble,
        <br />
        Only works on google, firerefox, ie10, flip, flipInx, flipOutX, flipInY, flipOutY,
        <br />zoomOutUp,hinge,rollIn,rollOut
         <br />
        ...more effects http://daneden.github.io/animate.css/
	</div>
	<input type="button" value='mouse up and try'/>
</body>
</html>
animate.css-very cool css3 third-party library special effects-paste demo

Guess you like
