CSS Brightness and Contrast Animation - css

Question

I have a solid background that I want to alternate the brightness of on a loop using CSS on Chrome. The background will change to match a user's profile so it won't always be the same color.
As an example: The background could start out red, transition to a pinkish color and then back to red after a second.
Another example: The background could start out blue, transition to a baby blue color and then back to blue after a second.
I can accomplish the color effect by adjusting the brightness and contrast of the color but I don't know how to do this with webkit.
How can I alternate the brightness and contrast using CSS and webkit?

Answer 1

UPDATE:
You can animate brightness and contrast the same way, but I'm not sure how you would like to achieve pink with that.
Filters require the prefix -webkit-
#keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
50% {
filter: brightness(0.4);
filter: contrast(0.4);
-webkit-filter: brightness(0.4);
-webkit-filter: contrast(0.4);
}
100% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
}
Fiddle
Why use brightness and contrast when you can just tween between the colors?
div {
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
from {background: red;}
to {background: pink;}
}
Fiddle
Or if you want to loop it without the blink
#keyframes example {
0% {background: red;}
50% {background: pink;}
100% {background: red;}
}
Fiddle