动画-向大家请教个思路

想实现的效果：
1.轮播效果，1转到2的位置，2转到3的位置
2.点击某个会直接转到3的位置

上下左右移动还是不规则移动

<div class="yaars">
      <span class="s1">1</span> 
      <span class="s2">2</span>
      <span class="s3">3</span>
    </div>

@keyframes s1 {

      0%,
      29.33% {
        top: 45px;
        left: 500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, -5deg);
      }

      33.33%,
      62.66% {
        top: 0px;
        left: 1500px;
        color: #fff;
        transform: skew(0deg, 0deg);
        text-shadow: 0 0 10px #2849cb, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;

      }

      66.66%,
      96% {
        top: 45px;
        left: 2500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      98% {
        top: 200%;
        left: 3000px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      98.01% {
        top: 200%;
        left: 0px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      100% {
        top: 45px;
        left: 500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, -5deg);
      }
    }

    @keyframes s2 {

      0%,
      29.33% {
        top: 0px;
        left: 1500px;
        color: #fff;
        transform: skew(0deg, 0deg);
        text-shadow: 0 0 10px #2849cb, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
      }

      33.33%,
      62.66% {
        top: 45px;
        left: 2500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);

      }

      64.66% {
        top: 200%;
        left: 3000px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      64.661% {
        top: 200%;
        left: 0px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      66.66%,
      96% {
        top: 45px;
        left: 500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, -5deg);
      }

      100% {
        top: 0px;
        left: 1500px;
        color: #fff;
        transform: skew(0deg, 0deg);
        text-shadow: 0 0 10px #2849cb, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
      }
    }
@keyframes s3 {

      0%,
      29.33% {
        top: 45px;
        left: 2500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);

      }

      31.33% {
        top: 200%;
        left: 3000px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      31.331% {
        top: 200%;
        left: 0px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }

      33.33%,
      62.66% {
        top: 45px;
        left: 500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, -5deg);


      }

      66.66%,
      96% {
        top: 0px;
        left: 1500px;
        color: #fff;
        transform: skew(0deg, 0deg);
        text-shadow: 0 0 10px #2849cb, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
      }

      100% {
        top: 45px;
        left: 2500px;
        color: #b9e1ff;
        text-shadow: none;
        transform: skew(0deg, 5deg);
      }
    }

   .s1 {
      top: 45px;
      left: 500px;
      color: #b9e1ff;
      transform: skew(0deg, -5deg);
      animation-name: s1;
      animation-duration: 30s;
      // animation-delay:2s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    .s2 {
      top: 0px;
      left: 1500px;
      color: #fff;
      transform: skew(0deg, 0deg);
      text-shadow: 0 0 10px #2849cb, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
      // animation-name: s2;
      animation-fill-mode: forwards;
      animation-duration: 30s;
      // animation-delay:20s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
 .s3 {
      top: 45px;
      left: 2500px;
      color: #b9e1ff;
      // transform: skew(0deg, 5deg);
      // animation-name: s3;
      animation-duration: 30s;
      // animation-delay:2s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

纯js，html 实现? 可以的话直接用 swiper

如何想自己尝试的话，可以自己试试
不过工作应该都用这种插件
https://www.swiper.com.cn/api/start/new.html
细心阅读，就能转换成自己想要的格式，非常的方便
有用记得采纳呐