Intro To Basic CSS Animation

As if CSS wasn't amazing and mysterious (at least to me) enough already, I find out that you can move things with it. I got chills just typing this.

I set out by trying to find some straight forward tutorials on the subject, but found this to be a more challenging task than anticipated. Many web tutorials for beginners seem to assume a certain level knowledge on behalf of the reader, even going so far as to say "obviously". Well, this just makes me a pouty panda because quite frankly I find exactly nothing obvious about CSS and HTML. Now, I'm not saying there should be a tutorial on CSS animation that first has to teach you HTML and CSS, but I'm not looking to do something fancy with CSS animation right now, I just need to know how to do something. All that being said, this writeup by Shay Howe was the best read I came across on the topic so far. 

So let's start by making a circle. Screen Shot 2014-01-24 at 10.18.49 AMOur next order of business: setting Keyframes in our CSS. The @keyframes rule is going to allow you to establish your animation on the selected HTML element. These are created with "@keyframes" followed by a name that ideally will describe what you are going to make the element do. Next you will need to define your keyframes; what shenanigans are you going to have this circle get into?!Screen Shot 2014-01-24 at 10.43.02 AM

The first set of values define where you want this guy to be at the start of the page, followed by where you want him (or her) to be 500px into the page, and finally, where you want him (...or her) to be 1000px into the page. You will need to then assign this particular animation to the element that you are about to make awesome. Do this by going to the CSS for that element and assigning it an animation value. For example, animation: slide 3s infinite; This tells the element to absorb the values of the slide animation that you already defined, the duration to spend at each defined point, and for how long to do all this. [CodePen height=300 show=result href=cDvqh user=JoniTrythall ]

There is much, much more to say on the issue and lots of magic to be had, but hopefully this gets you moving (ha) and excited.

Also worth scrolling your eyeballs over: this article at Smashing Magazine by Louis Lazaris. My mind was also blown recently by this tutorial at CSS-TRICKS by Zach Saucier.

See all the code here.

JB