Démarrer une Keyframe Css avec un bouton en utilisant JS
Fermé
Ryokens
Messages postés
2
Date d'inscription
mardi 14 mai 2019
Statut
Membre
Dernière intervention
15 mai 2019
-
14 mai 2019 à 19:06
ranma - 18 mai 2019 à 17:13
ranma - 18 mai 2019 à 17:13
A voir également:
- Démarrer une Keyframe Css avec un bouton en utilisant JS
- Démarrer en mode sans echec - Guide
- Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad
- Impossible de démarrer la ps4 - Forum PS4
- Taille bouton css - Forum HTML
- Bouton on off ✓ - Forum Loisirs / Divertissements
Modifié le 15 mai 2019 à 01:40
document.getElementByTagName('style')[0].innerHTML = document.getElementByTagName('style')[0].innerHTML+' body{background-color:red;}'; /** on attribue une valeur au premier élément style de la page qui utilise son ancien contenu, ici pour l'exemple j'ai indiqué de passer le body en rouge mais on peut bien entendu rajouter toutes les règles CSS que l'on veut comme le @keyframe tant que les id sont correctement remplies au préalables */Plusieurs erreurs dans votre CSS comme dans le JavaScript que vous constaterez en utilisant la console du navigateur:
Vous définissez une animation mais ne l'appliquez pas à un élément, donc rien ne s'animera.
Vous vous trompez dans la notation objet JavaScript:
ceci
document.getElementById('login-card').style /** indique l'attribut style de l'élément qui a pour ID login-card mais quid d'un objet "animation" appartenant à style? Il n'existe pas puisque style attends une chaîne de caractères, celle-ci exprimée en HTML(DOM) par <element id='login-card' style='CONTENU ICI' >... Donc soit si vous voulez écrire un CSS dans le style c'est comme ceci: */ ELEMENT.style='une ou plusieurs règles css ici'; /* ou plus simple encore en utilisant une id ou une classe CSS il suffit d'indiquer celle -ci: */ document.getElementById('login-card').className='nom de classe'; /**-- ici j'utilise l'attribut class(ccessible par className) puisque l'id est déjà définit et sert au sélecteur Notez qu'il est possible d'avoir plusieurs class pour une balise et que cela doit correspondre à ce que vous définissez pour l'animation */ /** Où comme vous étiez parti vous pouvez très bien écrire ceci: */ document.getElementById('login-card').style='animation blocLog 5s'; //-- attention dans votre code à ne pas mélanger les choux et carottes ou putôt JavaScript et CSS comme vous l'avez fait et surtout regarder vos erreurs dans la console, vous auriez ainsi trouvé rapidement par vous mêmeEt pour la solution qui change juste la classe (plus simple plus modulaire et plus clair à lire et comprendre quand on reviens sur le code et aussi qui sépare bien le CSS du JavaScript vous devez avoir ceci:
.animationClasse{ -webkit-animation: blocLog 5s infinite; /* Safari 4.0 - 8.0 */ animation: blocLog 5s infinite; }puis utiliser JS pour définir que l'élément à animer prends la classe(attribut HTML) 'animationClasse' via className comme indiqué ci-dessus.
Plus de détails ici:
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
et là
https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_
15 mai 2019 à 17:29
J'ai essayé d'écouter vos consignes malgré cela je n'arrive pas à lier les deux.
Modifié le 18 mai 2019 à 17:15
Basiquement vous avez à faire ça en utilisant la classe de l'animation qui utilise @keyframe:
Où est le problème?