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>
