CODEWITHSUNDEEP
csscss-animationslinear-gradients
colindunn
colindunn

Reputation: 3163

Change CSS property when animation direction is reverse

In my loading animation below I'm trying to create a "comet" that appears to be bouncing from side to side. I've nearly achieved it except that the "tail" of the comet needs to flip when it bounces from left to right.

When it bounces from right to left the angle of the CSS gradient should be 90deg. And when it bounces from left to right the angle should be -90deg.

Is this possible to do?

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
    from   {margin-left: 0; width: 0}
    50% {width: 100px}
    to {margin-left: 100%; width: 0}
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
  animation-name: loading-bar-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
<div class="frame">
  <div class="loading-bar"></div>
</div>

Upvotes: 3

Views: 125

Answers (1)

Temani Afif
Temani Afif

Reputation: 272919

You can integrate the gradient change within the animation. Remove the alternate and add more states within the keyframes to create the alternate effect where you change the gradient for each direction:

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
  from {
    margin-left: 0;
    width: 0;
    background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  25% {
    width: 100px;
    background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  50% {
    margin-left: 100%;
    width: 0;
    background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  50.1% {
    margin-left: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  75% {
    width: 100px;
    background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  100% {
    margin-left: 0%;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  animation-name: loading-bar-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
<div class="frame">
  <div class="loading-bar"></div>
</div>

Another idea is to use multiple animation:

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
    from   {margin-left: 0; width: 0}
    50% {width: 100px}
    to {margin-left: 100%; width: 0}
}
@keyframes change {
  0%,50% {background: linear-gradient(-90deg, rgba(0,122,255,1), rgba(0,122,255,0));}
  50.1%,100%{background: linear-gradient(90deg, red, rgba(0,122,255,0));}
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
  animation-name: loading-bar-animation,change;
  animation-duration: 1s,2s;
  animation-iteration-count: infinite;
  animation-direction: alternate,normal;
  animation-timing-function: ease-in-out;
}
<div class="frame">
  <div class="loading-bar"></div>
</div>

And for this particular case a scale effect can do the job:

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
    from   {margin-left: 0; width: 0}
    50% {width: 100px}
    to {margin-left: 100%; width: 0}
}
@keyframes change {
  0%,50% {transform:scaleX(-1)}
  50.1%,100%{transform:scaleX(1)}
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
  animation-name: loading-bar-animation,change;
  animation-duration: 1s,2s;
  animation-iteration-count: infinite;
  animation-direction: alternate,normal;
  animation-timing-function: ease-in-out;
}
<div class="frame">
  <div class="loading-bar"></div>
</div>

Upvotes: 5

Related Questions