I came across a new topic CSS animations. And I tried to implement some examples. In the code below. There are 2 event handlers associated with elements. They both change the animation property of the same element. On firing any event for the first time, animation is smooth. But after that both events are stopped abruptly. How can I make this smooth?
document.querySelector('#button1').onclick = ({ currentTarget }) => {
currentTarget.style.animation = 'mymove 2s linear forwards';
}
document.querySelector('#button2').onclick = ({ currentTarget }) => {
currentTarget.style.animation = 'mymove 2s linear reverse backwards';
}#button1,
#button2 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#button2 {
background: aqua;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}<button id="button1"></button>
<button id="button2"></button>Is this the result you were looking for? Notice that I added a second keyframes declaration.
document.querySelector('div').onclick = () => {
document.querySelector('div').style.animation = 'mymove 2s linear forwards';
}
document.querySelector('section').onclick = () => {
document.querySelector('div').style.animation = 'mymove1 2s linear reverse backwards';
}div {
width: 100px;
height: 100px;
background: red;
position: relative;
}
section {
width: 100px;
height: 100px;
background: aqua;
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
@keyframes mymove1 {
from {
top: 0px;
}
to {
top: 200px;
}
}<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>Update:
The best reason I can can find for the original code not working is:
The animation-name property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute. Furthermore, if the animation name is none then there will be no animation. This can be used to override any animations coming from the cascade. If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins. Each animation listed by name should have a corresponding value for the other animation properties listed below. If the lists of values for the other animation properties do not have the same length, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn’t have enough comma-separated values to match the number of values of animation-name, the UA must calculate its used value by repeating the list of values until there are enough. This truncation or repetition does not affect the computed value. Note: This is analogous to the behavior of the background-* properties, with background-image analogous to animation-name.