CODEWITHSUNDEEP
htmlcss
core114
core114

Reputation: 5325

Arrow Animation moving side issue

I try to change this arrow effect, moving left to side, but its not worked for me, anyone know how to do that correctly

I used this tutorial 

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

.arrow {
  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>

Upvotes: 0

Views: 488

Answers (3)

Temani Afif
Temani Afif

Reputation: 272891

Here is another idea with less of code and easier to handle:

.arrow {
  width:200px;
  height:80px;
  overflow:hidden;
  margin:5px auto;
  position:relative;
  -webkit-mask:linear-gradient(to right,transparent,#fff 20% 80%,transparent);
  mask:linear-gradient(to right,transparent, #fff 20% 80%,transparent);
}
.arrow:before,
.arrow:after {
  content:"";
  position:absolute;
  width:200%;
  left:0;
  top:0;
  height:50%;
  background:linear-gradient(to right,blue 8px,transparent 0) left/calc(100%/8) 100%;
  transform:var(--s,scaleY(1)) skew(45deg);
  transform-origin:bottom;
  animation:move 2s infinite linear;
}
.arrow.right:before,
.arrow.right:after {
  animation-direction:reverse
}
.arrow:after {
  --s:scaleY(-1);
}

@keyframes move{
  to {
    transform:translateX(-25%) var(--s,scaleY(1)) skew(45deg);
  }
}
<div class="arrow">
</div>

<div class="arrow right">
</div>

Upvotes: 1

Ahmed El-sayed
Ahmed El-sayed

Reputation: 329

try this CSS code 

#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); }  
}

Changes : make transform rotate value to be 135deg insted of -45deg ( another way change border-color from "black transparent transparent black" to "transparent black black transparent" )

the other modifications is to change the keyframes transform to set start value by minus in X axis and end value by positive i X axis

Upvotes: 1

Shashank Bhatt
Shashank Bhatt

Reputation: 857

Please add below updated css that to make it work from left to right.

#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); }  
}

The key thing is to change the border-color for right and bottom after transforming and reverse the animation by reversing the values in the keyframes. Here is the updated link to the pen.

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

Upvotes: 1

Related Questions