How to write a simple animation in CSS?

Question

Hello guys! Can someone show me how to write a simple animation in CSS? And I need some explain about "-keyframes-". What is it?

Answer 1

You can apply an animation to any element I believe by adding the animation to the css:

#elementId {
animation: toBlue 2s infinite alternate;
}

@keyframes toBlue {
0% { color: black; }
100% { color: blue; }
}

I think I have the shorthand correct for the animation keyword, but double check by looking it up. the keyframes are basically points in time during the animation. So using 50% is like saying, "okay, halfway through the animation, I want the background (or whatever) to be green". Here is a great place to learn css animations: www.w3schools.com/css/css3_animations.asp