CSS3 Rotation de 0 à 90 de 90 à 180

J'ai un objet en rotation de 360 degrés à l'aide de CSS3 de rotation de l'animation. Toutefois, le code (lien ci-dessous) fait pivoter l'image de 360 degrés, puis répète la même animation.

Je veux le faire pivoter de 360 degrés, pause de 90 degrés et infinies de la rotation.

Toute aide serait grandement appréciée.

Grâce

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 1s ease-in-out infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s 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); } }

Ici est un JSFiddle pour le projet

Avez-vous été vouloir arrêter pour une durée après chaque rotation de 90 degrés
Pas forcément, surtout si j'ai ease-in-out
le commentaire ci-dessus 🙂
Voici un autre jsfiddle que j'ai essayé de travailler avec: jsfiddle.net/julien/rukC6
Si vous voulez toujours faire un 360?
Ouais, ça va encore faire un 360, ça va aller: 0-90, 90-180, 180-270 puis 270-360
SI vous voulez le faire pivoter de 360 degrés, pause de 90 degrés et arrêter de tourner après une itération?
Presque, je veux le faire pivoter de 360 degrés, pause de 90 degrés et infini de la rotation.
Pouvez-vous modifier votre question et d'ajouter que dans? Sera plus facile pour d'autres personnes pour vous aider
Édité question 🙂
Mise à jour de ma réponse à votre demande.

InformationsquelleAutor David Ingledow | 2013-08-16

Vous avez besoin pour ajouter des points supplémentaires à votre image-clé:

Violon

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(90deg); }
  25% { -webkit-transform: rotate(90deg); }
  45% { -webkit-transform: rotate(180deg); }
  50% { -webkit-transform: rotate(180deg); }
  70% { -webkit-transform: rotate(270deg); }
  75% { -webkit-transform: rotate(270deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.animation-rotate {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
}

Parfait!!! Merci beaucoup!
Merci pour l'aide avec cette, pensé que je voudrais juste vous faire savoir que j'ai fait cet écran de chargement avec elle. Voici le lien de la Vigne

InformationsquelleAutor dc5

Si vous voulez juste pour s'arrêter après il tourne il suffit de supprimer l'infini modificateur:

http://jsfiddle.net/Ugc5g/30/

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s ease-in-out; //No more infinite
    -moz-animation:spin 4s linear;
    animation:spin 4s linear;
}
@-moz-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}

Si vous voulez arrêter l'animation à la incréments c'est un peu plus difficile:

http://jsfiddle.net/Ugc5g/31/

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s ease-in-out infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin { 
0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}

Presque, je veux le faire pivoter de 360 degrés, pause de 90 degrés et infini de la rotation.
Je vous remercie pour votre aide, j'ai fait ceci avec elle!

InformationsquelleAutor Matthew R.

Vous devez vous connecter pour publier un commentaire.