IP Girl
  1. IP Girl
  3. Comment jouer les transitions CSS3 dans une boucle?
Intereting Posts
Table avec 100% de largeur avec des colonnes de taille égale. (un nom de variable) Couleur de paramètre Javascript dans Netbeans Comment installer un fichier .sty LaTeX sur OSX? Comment trouver un port disponible? Simulation des entrées de souris par programmation sous OS X Comment puis-je utiliser le java pour chaque boucle avec des classes personnalisées? Java Enum retour Int Erreur de permGen dans Tomcat Quelle est la différence entre Bitmap et Drawable dans Android? Comment générer un nombre aléatoire dans Bash? Lecture et écriture de fichier binary Les deltas des fichiers de pack de Git sont-ils plutôt des instantanés? Qu’est-ce qu’une clé API? Comment append du texte à un div existant avec jquery Déchargement d’un ByteArray en utilisant Actionscript 3

Comment jouer les transitions CSS3 dans une boucle?

Le style suivant est juste un exemple de définition de transitions dans CSS3.
Existe-t-il une astuce CSS pour faire jouer ce jeu en boucle? 

div { width:100px; height:100px; background:red; transition:width 0.1s; -webkit-transition:width 0.1s; /* Safari and Chrome */ -moz-transition:width 0.1s; /* Firefox 4 */ -o-transition:width 0.1s; /* Opera */ transition:width 0.1s; /* Opera */ } div:hover { width:300px; }

Les transitions CSS ne s’animent que d’un ensemble de styles à un autre; Ce que vous recherchez, ce sont des animations CSS .

Vous devez définir les images clés d’animation et les appliquer à l’élément: 

 @keyframes changewidth { from { width: 100px; } to { width: 300px; } } div { animation-duration: 0.1s; animation-name: changewidth; animation-iteration-count: infinite; animation-direction: alternate; }

Consultez le lien ci-dessus pour savoir comment le personnaliser à votre goût, et vous devrez append des préfixes de navigateur.