Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 - 11: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 - 19: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 le Mer 13 Avr - 12: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 : 4760
Inscrit(e) le : 12/09/2012

http://mllealys2.forumactif.org/
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 - 18: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 le Mer 13 Avr - 18: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 : 4760
Inscrit(e) le : 12/09/2012

http://mllealys2.forumactif.org/
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 - 19: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


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