Dejan.S Dejan.S - 7 months ago 24
CSS Question

Delay animation, make it go the other direction after Xs

I'm getting more into animation property and keyframes. Got this loader thing I'm working on. I'm having a hard time getting to go from right to left with

animation-delay
and multiple animations approach.

This one dot is supposed to go from left > right, right > left.

Stop there for until the other dots pass back the other direction and start again, stop there until the other dots pass back....

My approach is:

Full solution at jsfiddle



body {
background-color: #111111;
}

[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 1.66667s linear infinite 3.125s, load-through-left 1.66667s linear infinite 3.125s;
}

/* keyframes start */
@keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
@keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
@keyframes load-through-right {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
@keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */

<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>





any suggestions for math improvements, I'm all for it.


EDIT

Final result

Answer

Here is an approach with single animation. Let me know if it's a direction for you or may I didn't understand your wish.

body {
  background-color: #111111;
}

[data-am-animation] {
  box-sizing: border-box;
  background-color: white;
  flex-direction: row;
  margin: 30px;
  position: relative;
  height: 180px;
  width: 120px;
}
[data-am-animation] .dot {
  background-color: deepskyblue;
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
[data-am-animation] .dot.down {
  left: 30px;
  animation-name: load-down;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
  left: 60px;
  animation-name: load-up;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
  left: 0;
  top: 50%;
  margin-top: -15px;
  /*animation-name: load-through;
  animation-duration: ($animation-speed / 2.6);
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite; 
  animation-delay: ($animation-speed / 1.3);*/
  animation: load-through-right 5s linear infinite;
}

/* keyframes start */
@keyframes load-down {
  0% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
  100% {
    transform: translate(0, 150px);
    background-color: deeppink;
  }
}
@keyframes load-up {
  0% {
    transform: translate(0, 150px);
    background-color: deeppink;
  }
  100% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
}
@keyframes load-through-right {
  0%, 20% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
  50%, 70% {
    transform: translate(90px, 0);
    background-color: deeppink;
  }
}
@keyframes load-through-left {
  0% {
    transform: translate(90px, 0);
    background-color: deeppink;
  }
  100% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
}
/* keyframes end */
<div data-am-animation>
  <div class="dot through"></div>
  <div class="dot down"></div>
  <div class="dot up"></div>
</div>