CSS Background Color Keyframes Animation

CSS background color keyframes animation

@-webkit-keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;} /* your chosen 'mid' color */
    100.0%  {background-color:red;}
}

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

JSfiddle Demo

CSS keyframe animation using current background colour

I think the best option is to use two layers, first whith background-color X and second with the animation, but using also opacity:

HTML:

<div class="bg">
    <div class="foo"></div> // Animate this div
</div>

CSS:

.bg { position:relative; background-color: X }
.foo { width:100%; height:100%; -webkit-animation: aboutColor [...] ;} 

@-webkit-keyframes aboutColour /*--for webkit--*/{
    0%   {background-color: transparent; opacity: 0}
    100% {background-color: red; opacity: 1}
}

Sync CSS keyframe color animations

Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.

HTML:

<div id="container">
   <div id="child">Your content.</div>
</div>

CSS:

#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}

Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/

Animate background between original and set color

You can omit keyframes with the initial values:

.animate {  padding: 1cm;  animation: blink 3s infinite;}
@keyframes blink {  50% {    background: green;    color: #000;  }}

<div style="background: blue; color:#fff" class="animate">Blue background</div><div style="background: red; color:#fff" class="animate">Blue background</div>

How can I loop a Keyframe css color animation?

body {
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Roboto', sans-serif !important;
    position: relative;
    animation-name: color;
    animation-duration: 6s;
    animation-iteration-count:infinite; /* add this line */
}

Animate background fill from left to right using keyframes animation one by one

you can set animation-delay but for that, you'll need to remove the !important
also if there's an N amount of boxes you can add the style using JS or SCSS loop.

.box {  width: 26px;  height: 10px;  display: inline-block;  background-size: 200% 100%;  background-image: linear-gradient(to left, red 50%, black 50%);  -webkit-animation: progressbar 1s ease infinite;  -moz-animation: progressbar 1s ease infinite;  -o-animation: progressbar 1s ease infinite;  animation: progressbar 1s ease infinite;}
.box:nth-child(2) {  animation-delay: 1s;}
.box:nth-child(3) {  animation-delay: 2s;}
@-webkit-keyframes progressbar {  0% {    opacity: 1;    background-position: 0 0;  }  100% {    opacity: 1;    background-position: -100% 0;  }}

<div class="box"></div><div class="box"></div><div class="box"></div>

Animate background color to different colors

Add this CSS to your div.
http://jsfiddle.net/Nillervision/a4ELz/

.test {
    overflow: hidden;
    text-align: center;
    font-family: sans-serif;
    font-size: 40px;
    line-height: 3;    
    -webkit-animation: glow linear 1s infinite; 
    animation: glow linear 1s infinite;
} 
@-webkit-keyframes glow { 
    0% { background-color:red; }
    50% { background-color:orange; }
    100% { background-color:red; } 

} 
@keyframes glow { 
    0% { background-color:red; }
    50% { background-color:orange; }
    100% { background-color:red; } 
}

If you only want the animation to run once on pageload remove the "infinite" value.
If you want the effect to happen on hover you could use css transitions instead.

---

Related Topics