Animating elements in your mobile applications is easy.

Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.

While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people who don’t really understand the real reasons why those practices exist and are so vigorously endorsed.

Use velocity.js instead!

Velocity.js is a free, lightweight library that you should be using - developer Neal O'Grady gets you started.

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.

The following article covers a large swath of SVG animation tips and resources for web designers. You’ll learn how SVG images are created and why they’re fantastic for use on the web. You’ll also find a collection of SVG animation tutorials and open source code to help new designers come to terms with building unique SVG animations from scratch.

You don’t need JavaScript to create impressive 3D projects in the web browser. In this post I will show how to create and animate a Portal-inspired scene using only CSS.

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Spheres

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.

Physics-based animations and interactions are becoming more common in UI. This page goes through some basic physical models and the kinds of interactions and animations that can be constructed from them.