箭头动画移动侧问题

Question

我尝试更改此箭头效果，向左移动到另一边，但是它对我不起作用，任何人都知道如何正确执行此操作

I used this tutorial

#arrowAnim {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow[_ngcontent-c4] {
  width: 34px;
  height: 34px;
  border: 0.5vw solid;
  border-color: #3f97cd transparent transparent #428ac7;
  -webkit-transform: rotate(45deg);
  transform: rotate(135deg);
}

.arrowSliding {
  position: absolute;
  -webkit-animation: slide 4s linear infinite;
  animation: slide 4s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.delay2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.delay3 {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@-webkit-keyframes slide {
  20% {
    opacity: 1;
    transform: translateX(9vw);
  }
  80% {
    opacity: 1;
    transform: translateX(-9vw);
  }
  100% {
    opacity: 0;
    transform: translateX(-15vw);
  }
}

@keyframes slide {
  20% {
    opacity: 1;
    transform: translateX(9vw);
  }
  80% {
    opacity: 1;
    transform: translateX(-9vw);
  }
  100% {
    opacity: 0;
    transform: translateX(-15vw);
  }
}

<div id="arrowAnim">
  <div class="arrowSliding">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay1">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay2">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay3">
    <div class="arrow"></div>
  </div>
</div>

Answer 1

请在下面添加更新的CSS，以使其从左到右运行。

#arrowAnim {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 5vw;
  height: 5vw;
  border: 2.5vw solid;
  border-color: transparent black black transparent ;
  transform: rotate(-45deg);
}


.arrowSliding {
  position: absolute;
  -webkit-animation: slide 4s linear infinite; 
          animation: slide 4s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s; 
    animation-delay: 1s;
}
.delay2 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}
.delay3 {
  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); } 
   20% { opacity:1; transform: translateX(-9vw); }  
   80% { opacity:1; transform: translateX(9vw); }   
  100% { opacity:0; transform: translateX(15vw); }  
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); } 
   20% { opacity:1; transform: translateX(-9vw); }  
   80% { opacity:1; transform: translateX(9vw); }   
  100% { opacity:0; transform: translateX(15vw); }  
}

[关键是在转换ans后通过更改关键帧的反向动画来更改右侧和底部的边框颜色。这里是笔的更新链接。

https://codepen.io/Shashank_bhatt1/pen/vYBoeKG

Answer 2

尝试此CSS代码

#arrowAnim {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 5vw;
  height: 5vw;
  border: 2.5vw solid;
  border-color: black transparent transparent black;
  transform: rotate(135deg);
}


.arrowSliding {
  position: absolute;
  -webkit-animation: slide 4s linear infinite; 
          animation: slide 4s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s; 
    animation-delay: 1s;
}
.delay2 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}
.delay3 {
  -webkit-animation-delay: 3s; 
    animation-delay: 3s;
}

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); } 
   20% { opacity:1; transform: translateX(-9vw); }  
   80% { opacity:1; transform: translateX(9vw); }   
  100% { opacity:0; transform: translateX(15vw); }  
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-15vw); } 
   20% { opacity:1; transform: translateX(-9vw); }  
   80% { opacity:1; transform: translateX(9vw); }   
  100% { opacity:0; transform: translateX(15vw); }  
}