They say things get better with time. That may not always ring true in some cases but I think that applies perfectly to CSS. ( which is short for Cascading Style Sheets) HTML & CSS go hand in hand; kinda like peanut-butter and honey.( yeah, I don’t eat jelly soooo it’s honey for me. Deal with it! 😂)
While HTML can be thought of as the structure or foundation of a webpage, CSS can be best described as the style or pizzazz of how a website will look.
Just think how boring life would be if our webpages lacked the power of CSS…..It’s almost too painful to bear! 😩😩😩
Anywho-
CSS3 is the latest version(released in 1999)and it came with a lot of bells and whistles. One neat thing in particular is something called keyframes.
According to developer.mozzilla.org keyframes can be describes as this:
The
@keyframesCSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
But today, I want to break down the technical jargon around it and give it to you simply: Keyframes is a really cool way to add animation and/or transitions to your projects. It uses the properties that you are already familiar with ( i.e. top, left, bottom, right, etc.) and combines them with an element to make action happen. In this short but to the point video(about 10 mins), I’m going to be covering some of the basics of keyframes and how to use them to make your projects come to life! We will be building a a simple sunrise project.
Hopefully you enjoyed this mini project and it inspires you to go out and build even more amazing things using our good friend keyframes. Until next time…Happy Coding Ya’ll. 😜
