+ 1
How to write a simple animation in CSS?
Hello guys! Can someone show me how to write a simple animation in CSS? And I need some explain about "-keyframes-". What is it?
1 Answer
+ 3
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