Cara buat animasi ratasi icon setelah di klik


Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara buat animasi icon setelah di klik.
Berikut ini syntaxnya.
------------------------------------------------
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style type="text/css">
.fa-refresh-animate {
animation-name: rotateThis;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#container {
    display: table;
    width: 300px;
    height: 400px;
}

#update {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

@keyframes rotateThis {
from { transform: scale( 1 ) rotate( 0deg );   }
to   { transform: scale( 1 ) rotate( 360deg ); }
}


</style>

<div id="container">
    <a id="update" href="#">
        <i class="fa fa-refresh fa-4x"></i>
    </a>
</div>

<script type="text/javascript">
$( document ).ready( function() {
$( "#update" ).on( "click", function( e ) {
        var $icon = $( this ).find( ".fa-refresh" ),
            animateClass = "fa-refresh-animate";

        $icon.addClass( animateClass );
        // setTimeout is to indicate some async operation
        window.setTimeout( function() {
        $icon.removeClass( animateClass );
        }, 2000 );
    });  
});
</script>
------------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/
Cara buat animasi ratasi icon setelah di klik Cara buat animasi ratasi icon setelah di klik Reviewed by Syawaluddin Amin, S.Kom on November 26, 2016 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.