Trying to achieve the same animation effect using different selectors has been a bit challenging for me. Specifically, when I attempt to utilize the animation without a selector and then with the selector :active, the browser only plays the animation once on page load. Subsequently, when I click, the animation does not re-trigger.
While one solution would be to create two sets of keyframes with the same content but different names, I prefer to avoid duplicating code. Therefore, I am currently exploring alternative methods to make this functionality work seamlessly. Does anyone have any suggestions or insights on how to accomplish this?
<style>
button.click {
animation: click 0.5s 0s 1 reverse ease none;
}
button.click:active {
animation: click 0.5s 0s 1 normal ease forwards;
}
@keyframes click {
0% {
margin-left: 0px;
margin-top: 0px;
box-shadow: 5px 10px rgba(0,0,0,0.2);
}
100% {
margin-left: 2.5px;
margin-top: 5px;
box-shadow: 2.5px 5px rgba(0,0,0,0.2);
}
}
</style>
<button class="click">test</button>