restart css animation #js
@keyframes my-animation {
from {
opacity : 0;
left : -500px;
}
to {
opacity : 1;
left : 0;
}
}
.run-animation {
position: relative;
animation: my-animation 2s ease;
}
#logo {
text-align: center;
font-family : Palatino Linotype, Book Antiqua, Palatino, serif;
}
<h1 id="logo" class="run-animation">
Fancy Text (click to restart)
</h1>
"use strict";
var element = document.getElementById("logo");
element.addEventListener("click", function(e){
e.preventDefault;
element.classList.remove("run-animation");
void element.offsetWidth;
element.classList.add("run-animation");
}, false);