L'animation Glyphicon cliquez sur

Je suis en train d'animer un glyphicon-refresh icône de sorte que lorsque je clique sur l'icône il devrait tourner. Je suis en train de faire cela à l'aide de CSS3, mais il ne fonctionne pas correctement.

Voici mon balisage:

<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>

Voici mon css:

<style>

.glyphicon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

</style>

Voici mon JS:

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

            $icon.addClass( animateClass );
            //setTimeout is to indicate some async operation
            window.setTimeout( function() {
                $icon.removeClass( animateClass );
            }, 2000 );
        });    
    });
</script>

D'aide, ou une approche alternative serait appréciée.

OriginalL'auteur Raghavendra | 2014-03-19

  1. 13

    Première: Votre sélecteur jQuery est faux: 

    .glyphicon glyphicon-refresh

    doit être 

    .glyphicon.glyphicon-refresh

    Deuxième: Vous devez préfixer toutes animate propriétés, la keyframes mot-clé et la transform propriété avec le fournisseur de préfixes. (Seulement Firefox et IE10+ support sans préfixe. http://caniuse.com/#feat=css-animation) Par exemple pour Safari et Chrome:

    .glyphicon-refresh-animate {
   -webkit-animation-name: rotateThis;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}

@-webkit-keyframes "rotateThis" {
 from { 
        -webkit-transform: rotate( 0deg );  
    }
 to  { 
        -webkit-transform: rotate( 360deg ); 
    }
}

    http://jsfiddle.net/DX4AJ/ Ce violon ne fonctionne que dans Safari et Chrome!

    Thank u , mais je suis en utilisant Google Chrome.
    Le violon devraient travailler en chrome puisque c'est WebKit
    css-tricks.com/snippets/css/keyframe-animation-syntax
    Il Ya travaillé . . Merci u . .

    OriginalL'auteur idmean