CSS keyframe Animation über JS mehrmals abspielen lassen?
Hallo, Wie ihr es schon aus der Frage entnehmen könnt, versuche ich eine Keyframe animation via JavaScript zu aktivieren. Jedoch habe ich das problem, dass sich diese animation nur einmal abspielen lässt. Könnt ihr mir bitte sagen woran das liegen könnte und mir dabei helfen den code zu vervollständigen? Hier der Code:
<head>
<title>Beispiel</title>
<style>
#y {
height: 50px;
position: relative;
top: 20;
color: rgba(100, 100, 100, 0);
}
#y:active{
animation: showEffect 0.5s;
}
@keyframes showEffect {
0% {
content: 'ICH';
top: 20;
color: rgba(100, 100, 100, 0);
}
20% {
top: 10;
color: rgba(100, 100, 100, 1);
}
100% {
top: 0;
color: rgba(100, 100, 100, 0);
}
}
</style>
</head>
<body>
<div id="container" align="center">
<div id="y"></div>
<br>
<br>
<input type="button" value="On" onclick="showEffect()">
<script>
function showEffect() {
var on = 1;
if (on == 1) {
document.getElementById('y').innerHTML = "A";
document.getElementById('y').style.animation = "showEffect 0.5s";
on = 0;
} else {
document.getElementById('y').innerHTML = "B";
document.getElementById('y').style.animation = "showEffect 0.5s";
on = 1;
}
}
</script>
</div>
</body>3 Antworten
Nun das wird so aus mehren Gründen nicht funktionieren. Du fügst die animation als style hinzu. Diese bleibt jedoch bestehen und verschwindet nicht von alleine. Du müsstest also über setTimeout z.B. nach 500ms die Animation entfernen um sie anschließend wieder setzen und damit starten zu können.
Deine Variable on wird immer 1 sein, da du sie innerhalb der Funktion setzt. Du könntest eine Klasse setzen oder anhand der innerHTML bzw. innerText die Entscheidung treffen, ob du A oder B hinein schreibst. Ansonsten bräuchtest du eine globale Variable außerhalb der Funktion, was aber eher nicht schön wäre. Das togglen der Animation kann dann außerhalb der Verzweigung stehen, immerhin wird es immer gemacht, egal ob im on === 0 oder on === 1 Fall.
An sich solltest du dir natürlich auch vernünftige Variablenamen angewöhnen und CSS und JavaScript in entsprechende Dateien auslagern.
animation: showEffect 0.5s infinite;
Kannst auch einen delay einfügen. Eine Startverzögerung von 1.5s sähe z.B. so aus: animation: showEffect 1.5s 0.5s infinite;
Der Delay wird aber nur beim ersten Mal eingesetzt.
Hi Siris, eine Endlosscheife erreichst du über diese CSS-Property:
animation-iteration-count: infinite;Trotzdem macht dein JavaScript wie von Apachy schon erwähnt so keinen Sinn, da musst du also nochmal ran. Der einfachste Weg um die Animation per Interaktion aktivieren und auch deaktivieren zu können ist über das togglen einer CSS Klasse. Das heißt du bestimmt deine animation und animation-iteration-count in einer Klasse und fügst diese dem Element bei Klick hinzu oder entfernst sie. Schau dir dazu mal die classList Methode "toggle" an:
https://developer.mozilla.org/de/docs/Web/API/Element/classList