Faire tourner une image en continue avec du CSS

2 participants

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 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.

Faire tourner une image en continue avec du CSS Circle10


Code : https://i.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

horusbk
*****

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

http://horus.forumactif.com/
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 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

MlleAlys
Membre actif

Messages : 5767
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 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

horusbk
*****

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

http://horus.forumactif.com/
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 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

MlleAlys
Membre actif

Messages : 5767
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 Mer 13 Avr 2016 - 21:42

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

horusbk
*****

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

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

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

- Sujets similaires

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