Faire tourner une image en continue avec du CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire tourner une image en continue avec du CSS

Message par horusbk le Mer 13 Avr 2016 - 13:07

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://mazerunnerforum.forumactif.fr/

Description du problème

Bonjour Smile
Après quelques recherches infructueuses, je me tourne vers vous. Je suis en train de coder une page html, pour la maintenance prochain de mon forum. Afin d'ajouter un peu d'animation à cette page, je cherche le moyen d'animer l'image ci-dessous. J'aimerais que cette dernière puisse tourner en continue sur elle-même.



Code : http://i86.servimg.com/u/f86/19/15/12/98/circle10.png

Merci beaucoup pour votre aide, cordialement.
Horusbk


Dernière édition par horusbk le Mer 13 Avr 2016 - 21:43, édité 1 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire tourner une image en continue avec du CSS

Message par MlleAlys le Mer 13 Avr 2016 - 14:30

Bonjour,
C'est possible en css grâce aux propriétés d'animation, un peu de recherche sur le net vous permettra de trouver nombreux codes possibles, par exemple :
https://jsfiddle.net/MlleAlys/99ebg3fm/

Le code html pour l'image :
Code:
<img class="tourne" src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />

Le code css pour construire l'animation (appelée ici "spin") :
Code:

@-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); }
}

Le code css pour appliquer l'animation spin à l'image :
Code:
.tourne {
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
C'est dans ce dernier code que vous pouvez modifier la vitesse (ici 1.5 seconde pour un tour).

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire tourner une image en continue avec du CSS

Message par horusbk le Mer 13 Avr 2016 - 20:05

Merci MlleAlys Very Happy
J'aurais néanmoins une petite question. Est-il possible d'intégrer me CSS ci-dessus directement dans le code HTML de la sorte :

Code:
<img style="..." src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />
Avec le css entre les guillemets de style ? Cependant, il me semble qu'il faut effectuer quelques modifications. Et pour cette partie, je ne sais pas du tout comment on peut la transformer pour l'intégrer :

Code:
 
@-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); }
}

Cordialement,
horusbk

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire tourner une image en continue avec du CSS

Message par MlleAlys le Mer 13 Avr 2016 - 20:20

pour la deuxième partie, oui c'est possible :
Code:
<img style="-webkit-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;" src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />

Mais pas pour la première partie.
Une autre possibilité :
Code:
<img class="tourne" src="http://i86.servimg.com/u/f86/19/15/12/98/circle10.png" />
<style>
@-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); }
}

.tourne {
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
</style>

Après ça dépend également de l'endroit où vous souhaitez afficher l'image.

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire tourner une image en continue avec du CSS

Message par horusbk le Mer 13 Avr 2016 - 21:42

Merci MlleAlys,
Du coup sujet résolu merci I love you

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum