CODEWITHSUNDEEP
cssfirefoxanimation
user1774640
user1774640

Reputation: 147

CSS background color keyframes animation

I'm trying to animate a simple fade in/out for a toolbar background color in firefox (themeing). Problem is, my color fades completely out to transparent. I would prefer my color to fade about half way then start easing back to full color.

I listed the code I've tried...

toolbar{
    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}

@keyframes animation {
    50.0%  {background-color:red;}
}

I've tried fiddling around with opacity settings with no luck. Any help is appreciated.

Upvotes: 7

Views: 40654

Answers (2)

Paulie_D
Paulie_D

Reputation: 115364

.animation_background_test{
    height:100px;
    -webkit-animation-name: animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;    
    -webkit-animation-play-state: running;
    
    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
    background-color: #f00;
}

@-webkit-keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff9999;}
    100.0%  {background-color:red;}
}

@keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff9999;}
    100.0%  {background-color:red;}
}
<div class="animation_background_test"></div>

Upvotes: 20

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48751

You can rotate through colors using key frames.

const generateKeyFrames = (head, ...rest) => ((colors) =>
  colors.map((v, i, a) =>
    `${
      (i * (100 / (a.length - 1))).toFixed(2).padStart(8, ' ')
    }% { background-color: ${
      v.padEnd(Math.max(...colors.map(c => c.length)), ' ')
    } };`)
  .join('\n')
)([head, ...rest, head])

console.log(generateKeyFrames('red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'));
body {
  -webkit-animation-name: animation;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: animation;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@-webkit-keyframes animation {
    0.00% { background-color: red;    }
   14.29% { background-color: orange; }
   28.57% { background-color: yellow; }
   42.86% { background-color: green;  }
   57.14% { background-color: blue;   }
   71.43% { background-color: indigo; }
   85.71% { background-color: violet; }
  100.00% { background-color: red; }
}

@keyframes animation {
    0.00% { background-color: red;    }
   16.67% { background-color: orange; }
   33.33% { background-color: yellow; }
   50.00% { background-color: green;  }
   66.67% { background-color: blue;   }
   83.33% { background-color: indigo; }
  100.00% { background-color: violet; }
}
<div class="colors"></div>

Upvotes: 0

Related Questions