200 votes

Animation CSS à rotation infinie

Je veux faire une rotation de mon icône de chargement par CSS.

J'ai une icône et le code suivant :

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

Mais ça ne marche pas. Comment faire pivoter l'icône à l'aide de CSS ?

3 votes

Solution fondée - jsfiddle.net/LwwfG réponse s'il vous plaît, à la question fermée.

3 votes

Vous pouvez ajouter votre propre réponse. Dans celle-ci, incluez le code de votre démo jsFiddle.

9voto

vinkal Points 41
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}

5voto

Kamal Kumar Points 41

Essayez simplement ceci. Fonctionne bien

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

#loading {
    width: 16px;
    height: 16px;
    -webkit-animation: loading 2s linear infinite;
    -moz-animation: loading 2s linear infinite;
}

<div class="loading-test">
    <svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>

3voto

DINESH Adhikari Points 482

Rotation sur l'ajout de la classe .active

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }

@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }

3voto

La façon la plus simple de le faire est d'utiliser des icônes de type font awesome en ajoutant la classe "fa-spin". par exemple :

<i class="fas fa-spinner fa-3x fa-spin"></i>

vous pouvez économiser quelques lignes de code mais vous êtes bien sûr limité aux icônes de Font Awesome. Je l'utilise toujours pour le chargement des spinners

vous avez ici la documentation de font awesome : https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

2voto

pradip kor Points 225
<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X