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
Reviewed by Syawaluddin Amin, S.Kom
on
November 26, 2016
Rating:

Tidak ada komentar: