Как изменить тень в css анимации через js?

Question

[classik1ee7]

Нужно изменить тень в анимации css с помощью js по нажатию на фигуру, каким образом это сделать по этой анимации?

.krug {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 300px#aa9dce;
  border-radius: 50px;
  background: #aa9dce;
  border: 4px solid rgb(255, 255, 255);
  -webkit-animation: krug 3s infinite ease-in-out alternate-reverse;
}

    @-webkit-keyframes krug {
        0% {
            
            box-shadow: 0 0 50px rgb(253, 3, 3);
        } 
        25% {
            
            box-shadow: 0 0 150px rgb(255, 166, 0);
            
        }
        50% {
           
            box-shadow: 0 0 300px rgb(245, 220, 0);
            
        }
        75% {
           
            
            box-shadow: 0 0 150px rgb(255, 166, 0);
        }
        100% {
         
            box-shadow: 0 0 50px rgb(253, 3, 3);
        }

    }

Comments

[Ankhena]

Например, по клику задать класс, в котором будет задана та анимация, которая вам нужна.