Animation de rotation CSS3

245
<img class="image" src="" alt="" width="120" height="120">

Impossible de faire fonctionner cette image animée, elle est censée faire une rotation de 360 ​​degrés.

Je suppose que quelque chose ne va pas avec le CSS ci-dessous, car il reste juste immobile.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}
Borsn
la source

Réponses:

521

Voici une démo . Le CSS d'animation correct:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


Quelques notes sur votre code:

  1. Vous avez imbriqué les images clés dans la .imagerègle, et c'est incorrect
  2. float:left ne fonctionnera pas sur des éléments absolument positionnés
  3. Jetez un œil à caniuse : IE10 n'a pas besoin du -ms-préfixe
Giona
la source
13
Si quelqu'un essaie cela dans son propre code: N'OUBLIEZ PAS LA section @ en bas
Jack M.
Bonjour Puis-je arrêter l'animation de la rotation Infinity après 5s?
MD Ashik
16
J'ai presque craché mon eau lorsque j'ai exécuté l'animation.
Razgriz
" float:left won't work on absolutely positioned elements", il les réduira à la taille minimale, similaire à ce qui est affiché: le bloc en ligne le fait
gregn3
32

J'ai une image tournante utilisant la même chose que vous:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
Ryan de Vries
la source
1
ajouter: transform:rotate(360deg);pour IE
Dusty
3
Veuillez choisir des exemples locaux plutôt que des liens de sites Web brisés.
evolutionxbox
Le lien est rompu maintenant.
Markus Bucher
30

Pour réaliser la rotation à 360 degrés, voici la solution de travail .

Le HTML:

<img class="image" src="your-image.png">

Le CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Vous devez survoler l'image et vous obtiendrez l'effet de rotation à 360 degrés.

PS: ajoutez une -webkit-extension pour qu'il fonctionne sur les navigateurs Chrome et autres webkit. Vous pouvez consulter le violon mis à jour pour le webkit ICI

Nitesh
la source
Fiddle ne fonctionne pas oO Chrome inspector n'aime pas votre CSS, en particulier la "transformation" et la "propriété de transition". Oh cher.
Just Plain High
1
Pour cela, vous devez ajouter un -webkit-tranformpour que cela fonctionne. Voici le violon mis à jour. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: Ceci est désormais très bien pris en charge et constitue un moyen privilégié de faire des rotations non infinies. -webkit-le préfixe n'est plus nécessaire et peut être supprimé en toute sécurité. Prise en charge du navigateur: caniuse.com/#search=transforms
Alph.Dev
2

si vous voulez retourner l'image, vous pouvez l'utiliser.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
Heo Đất Hades
la source
0

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Charles Mbogo
la source
0

essayez ce facile

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-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); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Omar bakhsh
la source
-6

Ici, cela devrait vous aider

Le lien jsfiddle ci-dessous vous aidera à comprendre comment faire pivoter une image.J'ai utilisé le même pour faire pivoter le cadran d'une horloge.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Où: • t: heure actuelle,

• b: valeur de début,

• c: changement de valeur,

• d: durée,

• x: inutilisé

Pas d'assouplissement (assouplissement linéaire): fonction (x, t, b, c, d) {return b + (t / d) * c; }

Abhi
la source
2
Je voterais pour cette réponse si vous fournissez un peu plus d'informations (comme vous le faites au violon). Je pense aussi que vous devriez mentionner que c'est un plugin jQuery parce que je me disais tous: "Je ne savais pas que jQuery pouvait faire ça !!! ^ _ ^ regarde le violon Oh attendez ... U_U"
Just Plain High
2
une explication des variables x, t, b, c, d (comme vous le faites dans le violon) et indiquant clairement que bien que ce ne soit pas une solution CSS comme demandé par OP, c'est une solution de plugin jQuery assez simple et efficace: )
Just Plain High
3
Voté. L'OP n'a pas demandé une solution Javascript, en particulier pas un plugin jQuery. Restez fidèle à ce qui est demandé.
TheCarver