I have a cool animated image element that I want to play at a specific point in time during a video using JavaScript. I'm not sure how to make it happen, but I know the .currentTime property could be the key. My goal is for the animation to only play once and if the user skips ahead or replays the video, the animation will trigger again.
I've created the animation CSS code below for reference:
body {
background-color: grey;
}
video {
width: 600px;
}
.inner {
position: relative;
height: 1000px;
width: 1000px;
overflow: hidden;
}
.animation {
width: 200px;
position: absolute;
z-index: 1;
left: 500px;
top: 100px;
animation-name: fling;
animation-duration: 2s;
visibility: hidden;
overflow: hidden;
animation-timing-function: linear;
}
@keyframes fling {
0% {left: 500px;top:100px;visibility:visible;}
20% {left: 800px;top:10px;transform:rotate(360deg);}
40% {left: 1100px;top:100px;transform:rotate(-180deg);}
42% {visibility:hidden;}
100% {visibility: hidden;}
}<body>
<center>
<div class="inner">
<video controls autoplay>
<source src="missile.mp4" type="video/mp4">
</video>
<img class="animation" src="https://paulgo.io/image_proxy?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FFQ_yFiLXMAAJmW9%3Fformat%3Dpng%26name%3Dlarge&h=d8af5114b1bd85e1d64353e43be2f4c1ea2edfc90479d4e7a12270ee9974616e">
</div>
</center>
</body>