CSS Keyframes

If you’re on IE 9 or under you won’t be able to see the demonstrations

Or I missed some prefixes when I styled this post, if that’s the case send a comment or shoot me an email and I’ll see if I can fix it.

There’s a lot of times when I’m either studying or developing that I get a random idea and I want to have a little fun. Well, this is one of those times. Here’s the back-story: when I first started in web development, I had a lot of ideas swarming in my head day and night. I was fascinated with image carousels like the one(s) I have on my home page and, if I’d like, on my portfolio page. Now with that in mind there are ways to shortcut jQuery and do an image carousel using @keyframes and animations in CSS but it’s not the smartest way. Stick with what works and use plugins, jQuery, or Javascript to do it since they’re cross-browser. So I’m going to go over @keyframes in CSS. The @keyframes rule isn’t supported in IE 9 or previous versions which makes it not practical. It does have support across the main, up-to-date browsers with the use of prefixes(-o-, -webkit-, -moz-). Let’s get on with it.

@keyframes is a way to generate styles based on a gradual pace or in other words, a set time. This is a general @keyframe to grow a text object. CSS styles shouldn’t be limited to certain styles but I am wrong on occasion. I did test out some CSS3 styles like “transform:translateX(100px)” and that worked in the browser but not in my post. 🙁 It would’ve been pretty cool to show that but oh well.

First, we start out with typing, @keyframes, then the name we want to call the animation, mine is “someName” (it doesn’t have to be in camel-case) which we’ll use later. Next we’ll add the animation in for the CSS.

So as you can see we added the “someName” part as our animation name which is the name I used for the @keyframes. And you’ll see this below.

Hi there!

No it is not a GIF, it is actual CSS done right in your browser.

Lately, I’ve been delving into JavaScript more than what some would say is sane but I don’t listen to the voices in my head. Eventually I’ll have another sweet JavaScript tutorial to present but until that time,

Stay Classy, Internet.