Html Question posted in
Some basic documentation can be found here.

Html – loop a css animation with multiple keyframe

I’m trying to make an animation loading screen but I can’t loop the multiple keyframes. I learned that I can only do it with JavaScript and I’m not good with scripting how can I do it?
Also, I can’t make it one keyframe (slide in arrow 1 then 2 then 3 will slide in and slideout arrow 3 will slide out first then 2 then 3)

let index = 1;

function repeatAnimation() {
  const arrow = document.querySelector('.arrow');

  if (index === 1) {
    arrow.style.animationName = 'slideIn';
    index = 0;
  } else {
    arrow.style.animationName = 'slideOut';
    index = 1;
  }

}

setInterval(repeatAnimation, 2000);
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #EE4036;
  font-family: Arial, sans-serif;
  font-weight: bolder;
  font-size: xx-large;
}

.arrows {
  display: flex;
  justify-content: start;
  align-items: start;
  padding-left: 6px;
  gap: 3px;
}


/* Common styles for arrows */

.arrow {
  position: relative;
  width: 10px;
  height: 10px;
  background: #EE4036;
  border-top-right-radius: 30%;
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
  rotate: 90deg;
  opacity: 0;
  animation: slideInOut 6s infinite;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: inherit;
  border-top-right-radius: inherit;
}

.arrow::before {
  background: #EE4036;
  transform: rotate(-135deg) skewX(-45deg) scale( 1.414, .707) translateY(-50%);
}

.arrow::after {
  background: #EE4036;
  transform: rotate(135deg) skewY(-45deg) scale( .707, 1.414) translateX(50%);
}

@keyframes slideIn {
  from {
    transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 0;
  }
  to {
    transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 1;
    left: 10px;
  }
  to {
    transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 0;
    left: 10px;
  }
}

.arrow {
  opacity: 0;
  animation: slideIn 0.5s forwards, slideOut 0.5s forwards, repeatSequence 2s infinite;
}

.arrow_1 {
  animation-delay: 0s, 2.5s;
}

.arrow_2 {
  animation-delay: 0.5s, 2s;
}

.arrow_3 {
  animation-delay: 1s, 1.5s;
}
<section>
  <div class="loading">Loading</div>
  <section class="arrows">
    <div class="arrow arrow_1"></div>
    <div class="arrow arrow_2"></div>
    <div class="arrow arrow_3"></div>
  </section>
</section>

im really bad with script but i think this how i should do it but its working only on the first arroe

Tags:

2

Answers


  1. 0

    You can achieve this without using the JS and but have to be very careful for animation

    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #EE4036;
  font-family: Arial, sans-serif;
  font-weight: bolder;
  font-size: xx-large;
}

.loading {
  margin-bottom: 20px;
}

.arrows {
  display: flex;
  justify-content: start;
  align-items: start;
  padding-left: 6px;
  gap: 3px;
}

.arrow {
  position: relative;
  width: 10px;
  height: 10px;
  background: #EE4036;
  border-top-right-radius: 30%;
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
  rotate: 90deg;
  opacity: 0;
  animation: slideSequence 6s infinite;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: inherit;
  border-top-right-radius: inherit;
}

.arrow::before {
  background: #EE4036;
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translateY(-50%);
}

.arrow::after {
  background: #EE4036;
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translateX(50%);
}

@keyframes slideSequence {
  0%, 20%, 40%, 60%, 80%, 100% {
    opacity: 0;
    transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
  }
  10%, 30%, 50%, 70%, 90% {
    opacity: 1;
    transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
  }
  25%, 45%, 65%, 85% {
    opacity: 0;
    transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
  }
}

.arrow_1 {
  animation-delay: 0s;
}

.arrow_2 {
  animation-delay: 0.5s;
}

.arrow_3 {
  animation-delay: 1s;
}
    <section>
  <div class="loading">Loading</div>
  <section class="arrows">
    <div class="arrow arrow_1"></div>
    <div class="arrow arrow_2"></div>
    <div class="arrow arrow_3"></div>
  </section>
</section>

    Please note that:

    slideSequence animation keyframes manage the entire animation and sequence.
    The arrow elements each have different animation-delay values to stagger their animations

    Login or Signup to reply.
  2. 0

    You really don’t need JS but I would recommend making an own animation for ever single arrow:

    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #EE4036;
  font-family: Arial, sans-serif;
  font-weight: bolder;
  font-size: xx-large;
}

.arrows {
  display: flex;
  justify-content: start;
  align-items: start;
  padding-left: 6px;
  gap: 3px;
}


/* Common styles for arrows */

.arrow {
  position: relative;
  width: 10px;
  height: 10px;
  background: #EE4036;
  border-top-right-radius: 30%;
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
  rotate: 90deg;
  opacity: 0;
  animation: slideInOut 6s infinite;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: inherit;
  border-top-right-radius: inherit;
}

.arrow::before {
  background: #EE4036;
  transform: rotate(-135deg) skewX(-45deg) scale( 1.414, .707) translateY(-50%);
}

.arrow::after {
  background: #EE4036;
  transform: rotate(135deg) skewY(-45deg) scale( .707, 1.414) translateX(50%);
}

@keyframes arrow1 {
  from {
    opacity: 0;
    left: -10px
  }
  12.5% {
    opacity: 1;
    left: 0
  }
  75% {
    opacity: 1;
    left: 0;
  }
  87.5% {
    opacity: 0;
    left: 10px;
  }
  to {
    opacity: 0;
    left: 10px;
  }
}

@keyframes arrow2 {
  from {
    opacity: 0;
    left: -10px
  }
  12.5% {
    opacity: 0;
    left: -10px
  }
  25% {
    opacity: 1;
    left: 0
  }
  62.5% {
    opacity: 1;
    left: 0;
  }
  75% {
    opacity: 0;
    left: 10px;
  }
  to {
    opacity: 0;
    left: 10px;
  }
}

@keyframes arrow3 {
  from {
    opacity: 0;
    left: -10px
  }
  25% {
    opacity: 0;
    left: -10px
  }
  37.5% {
    opacity: 1;
    left: 0
  }
  50% {
    opacity: 1;
    left: 0;
  }
  62.5% {
    opacity: 0;
    left: 10px;
  }
  to {
    opacity: 0;
    left: 10px;
  }
}


.arrows {
  .arrow { 
    &:nth-child(1) {
      animation: arrow1 3.5s infinite;
    }
    &:nth-child(2) {
      animation: arrow2 3.5s infinite;
    }
    &:nth-child(3) {
      animation: arrow3 3.5s infinite;
    }
  }
}
    <section>
  <div class="loading">Loading</div>
  <section class="arrows">
    <div class="arrow"></div>
    <div class="arrow"></div>
    <div class="arrow"></div>
  </section>
</section>

    PS: I can simplify my CSS code after my launch

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search