如何让动画渐进流畅而不是一步一步的？

Question

如何让动画渐进流畅而不是一步一步的？ 我不能使用 :hover 因为它是一个在按钮中带有 onclick 事件的动画。 html只是一个带有添加类的功能的按钮：change来启动动画。 它还有一个功能来获取鼠标位置，用于制作渐变效果。 这是CSS：

.bg {
      background: url(../images/meow.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh;
    }

    
    #root {
      cursor: url("../images/cursor.png"), auto;
      --X: 40vh;
      --Y: 45vh;
    }
    #root::before { 
      animation-name: example;
      animation-duration: 2s;
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: fixed;
      background: black;
      pointer-events: none;
    }
      #root.change::before { 
      animation: gradient 5s ease-in-out forwards;
      }
      @keyframes gradient {
        0% {
          background: radial-gradient(
        circle 1vma

x at var(--X) var(--Y),
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.90) 100%);
    }
 
    100% {
      background: radial-gradient(
        circle 10vmax at var(--X) var(--Y),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.8) 80%,
        rgba(0, 0, 0, 0.90) 100%);
    }