My CSS animation looks like this:
HTML:
<div class="container" id="cont">
<div class="box show"></div>
</div>
CSS:
.container {
width: 100vw;
height: 100vh;
}
.box {
position: absolute;
right: 0px;
width: 0px;
height: 100px;
transition-duration: 1500ms;
transition-property: width;
transition-delay: 1s;
display: flex;
justify-content: center;
align-items: center;
}
.container:hover .box {
width: 500px;
}
.show {
background: #9CEAEF;
transition-timing-function: ease-out;
}
I am trying to integrate a JavaScript countdown, where when it reaches 10, I want to display the CSS animation with some text and have it stay for 8 seconds before reverting back. I have been struggling to find a solution for over an hour.
function updateCountdown() {
var timeLeft = Math.round(vid.duration) - Math.round(vid.currentTime);
if (timeLeft == 10 && shown == false) {
console.log(timeLeft)
// here i want to trigger the css
shown = true
}else if (timeLeft < 2) {
vid.removeEventListener('timeupdate', updateCountdown);
// here i want to relase the css back
}
}
Check out the codepen link for more details: https://codepen.io/burlacu-daniel-robert/pen/bGEyYzN