Can I run animation with css button?

Question

When I click on a button that I have given, I want the button to activate the animation, but I have two animations when I add both, I get an error, how can I solve it :) I'm doing this animation for dark mode transition effect

#drk:active .turtle {
    animation: drag 4s linear;
   -webkit-animation: drag 4s linear alternate; /* Chrome and Safari */
  
   
    height: 100%;
    position: fixed;
    z-index: 50;
    top:0px;
    left: 0px;
  }

#drk:active . {
    animation: drag 4s linear;
   -webkit-animation: drag 4s linear alternate; /* Chrome and Safari */
  
   
    height: 100%;
    position: fixed;
    z-index: 50;
    top:0px;
    left: 0px;
  }

question from:https://stackoverflow.com/questions/65841168/can-i-run-animation-with-css-button

Answer 1

You can use the code below I also recommend you to review this link. https://www.w3schools.com/css/css3_animations.asp

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

#dark:focus{
  /*
  OR
  #dark:active{
  */
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

<button id="dark">TEST</button>