Making Animations with CSS3 Transitions and Transform Features

If you have been looking for a CSS3 video tutorial explaining how to create animations with transitions and transforms, look no further. This quick lesson is well thought out and easy to follow!

Before we get started, you should know that this video is best viewed in full-screen mode and in HD, if possible.

We have all become more accustomed to simple animations on the web. Whether it be a simple hover effect or watching change completely when you begin to interact with it. It makes for a much more interesting experience and actually changes the way we think about the  sites that we visit. It’s not just a first impressions thing. It’s more about caliber. How up-to-date are you with technology? And can you show me that your site is more cutting edge than the competition?

Some of these effects we create with CSS3 are so subtle, but there really do make all the difference. Take a nice hover effect, for instance. Moving your mouse to a spot on a web page and having it react in a certain way gives a sense of awareness and responsiveness – it’s also impressive, and as it becomes more commonplace in the online world, people will notice it’s missing on sites that do not have it. Lucky for you, it’s a very simple thing to accomplish!

You start with a standard box element, placed inside a <div>. Once your HTML is set, you can begin to style it with CSS. Provide some dimensions, add a border, center it, color it, etc. Now you can add a :hover property that will allow for some movement when a mouse touches the box. You can do a lot of cool things with hovers, including reshaping the object. Take this one step further and add timing to the equation, you can end up with some animations that will make all of this actually usable, and believable. Of course, you will need to tell each browser to render this effect over time by applying the relevant transform property.

For instance…

-webkit-transition:
-moz-transition:
-o-transition:
-ms-transition:
transition:

Without specifying the browser type for each browser, it might not render properly – so this is probably the first thing to check if your transition is not showing up for you. This process basically creates multiple transitions over the period of time you specify, which is why the objects seem to be animated and how it is possible through such a simple CSS procedure. The final transition property is there for the latest and greatest browsers.

If you are interested in learning about some more cool CSS3 animation ideas, you should check out this advanced tutorial on rotating objects or this one on creating animated pop-out effects with CSS3 drop shadows and keyframe animations. If you have any tutorial requests, or would like to share one of your own with the community, send us a message and we will follow up with you right away. Thanks for stopping by!