Recently, I've been delving into the world of CSS animations and experimenting with some examples. Below is a snippet of code where two event handlers are set up for elements, both manipulating the animation property of the same element. Initially, the animations run smoothly when triggered by either event. However, upon subsequent firing, the animations abruptly stop. How can this be resolved to ensure continuous smooth transitions?
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
}
section {
width: 100px;
height: 100px;
background: aqua;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>
<section></section>
<div></div>
</body>
<script>
document.querySelector('div').onclick = () => {
document.querySelector('div').style.animation = 'mymove 2s linear forwards';
}
document.querySelector('section').onclick = () => {
document.querySelector('div').style.animation = 'mymove 2s linear reverse backwards';
}
</script>
</html>