Retourner à la page d'accueil de TJS

Script animation : Création d'une animation via CSS

Animer un élément avec du CSS
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 178

Exécution du script

Emulation de la console

Code source

<html><head><style type="text/css">  div.zone {    border:2px solid #fff;    margin:3px;    padding:3px;   }@keyframes clignoter {  from {    border-color:#fff;    background-color:#fff;  }  to {    border-color:#f00;    background-color:#ffa;  }}.clignotement {  animation: clignoter 0.2s alternate infinite;}     </style><title>Animation CSS</title></head><body>  <h1 id="monH1" class="titre">Animation via CSS</strong></h1><div class="zone" id="z1">Div Zone 1</div><div class="zone" id="z2">Div Zone 2</div><div class="zone" id="z3">Div Zone 3</div><div class="zone" id="z4">Div Zone 4</div><script type="text/javascript">  document.getElementById("z1").className+=" clignotement";</script></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 20/03/2019 22:11:06 sur php7 en 88.7 ms