I have a simple issue with this code . I simply want the animationend to fire as soon as the animation completes visually.
The most similar answer i could find for this was this Why does animationend/webkitAnimationEnd event have a delay before it’s called?
But unfortunately using linear in my cases did not solve the issue.
<code>document.querySelector('h1.ani').addEventListener('animationend', (e) => {
console.log("invoked");
});</code>
<code>document.querySelector('h1.ani').addEventListener('animationend', (e) => {
console.log("invoked");
});</code>
document.querySelector('h1.ani').addEventListener('animationend', (e) => {
console.log("invoked");
});<code>* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: green;
letter-spacing: -500px;
&.ani {
animation: morph 4s linear forwards;
}
position: relative;
& span {
transition: opacity .5s ease;
&.show {
opacity: 1 !important;
}
}
&.hide span {
opacity: 0;
transform: scale(0) translateY(100%);
position: absolute;
}
}
@keyframes morph {
0% {
letter-spacing: -500px;
}
40% {
letter-spacing: 0px;
}
60% {
letter-spacing: 0px;
}
100% {
letter-spacing: -500px;
}
}</code>
<code>* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: green;
letter-spacing: -500px;
&.ani {
animation: morph 4s linear forwards;
}
position: relative;
& span {
transition: opacity .5s ease;
&.show {
opacity: 1 !important;
}
}
&.hide span {
opacity: 0;
transform: scale(0) translateY(100%);
position: absolute;
}
}
@keyframes morph {
0% {
letter-spacing: -500px;
}
40% {
letter-spacing: 0px;
}
60% {
letter-spacing: 0px;
}
100% {
letter-spacing: -500px;
}
}</code>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: green;
letter-spacing: -500px;
&.ani {
animation: morph 4s linear forwards;
}
position: relative;
& span {
transition: opacity .5s ease;
&.show {
opacity: 1 !important;
}
}
&.hide span {
opacity: 0;
transform: scale(0) translateY(100%);
position: absolute;
}
}
@keyframes morph {
0% {
letter-spacing: -500px;
}
40% {
letter-spacing: 0px;
}
60% {
letter-spacing: 0px;
}
100% {
letter-spacing: -500px;
}
}<code><h1 class="ani">
<span>W</span>
<span>e</span>
<span>b</span>
<span> </span>
<span>D</span>
<span>e</span>
<span>v</span>
<span>e</span>
<span>l</span>
<span>o</span>
<span>p</span>
<span>e</span>
<span>r</span>
</h1></code>
<code><h1 class="ani">
<span>W</span>
<span>e</span>
<span>b</span>
<span> </span>
<span>D</span>
<span>e</span>
<span>v</span>
<span>e</span>
<span>l</span>
<span>o</span>
<span>p</span>
<span>e</span>
<span>r</span>
</h1></code>
<h1 class="ani">
<span>W</span>
<span>e</span>
<span>b</span>
<span> </span>
<span>D</span>
<span>e</span>
<span>v</span>
<span>e</span>
<span>l</span>
<span>o</span>
<span>p</span>
<span>e</span>
<span>r</span>
</h1>