Dejan.S Dejan.S - 3 months ago 8
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>

Comments