Often happens that customers require to implement transitions between pages, nice animations, etc. also in a mobile web sites.
This kind of effects usually belong to Flash web sites but unfortunately on iOS devices there is still no support for Flash. Thanks to “Stevie” in fact the web on the mobile is growing up without the Flash Player but the request the customers have are always the same: nice transitions, cool effects, etc.
The result is that we have to use technologies that are pretty new and without a strong background like Flash to satisfy customer’s request.
Anyway, let’s see hot to create a transition effect on an iOS device with CSS and the webkit transitions.

It’s pretty easy to create a page transition effect using the webkit transitions in a CSS file or declaration.
As of June 2011, Firefox 5 includes CSS Animation support. CSS animation is also available as a module in the nightly builds of WebKit as well as Google Chrome, Safari 4 and 5 and Safari for iPhone, Android 2.x and 3.x, the RIM OS6 web browser, with the -webkit- prefix.

The syntax to define a transition is pretty sample, it’s enough to use the @-webkit-keyframes directive followed by the name of the transition

In the curly braces that follow the name of the transition it’s possible to define which properties have to be changed at a specific time

If an animation has the same starting and ending properties, you can comma separate the percentage values and define the properties

If you want to create infinite animation you can do it easily combining transitions and transformation.
In this case usually the from and to keyword are used but actually have the same meaning of 0% and 100%.

In order to create a fade in page effect you can just declare in a CSS file two animations

The first one is the one needed to make the page blank when loaded.
After you define the animations it’s enough to create a new CSS class specifying which animations to use, the duration, the timing function and the iteration count

If you want that the elements in your page fade in with a specific amount of delay you can add the following lines to your CSS

In the HTML page you have to import your CSS and use the sub classes already defined in order to see your animations working properly

The sample animation defined above changes also the font size, actually I did it just in order to show that you can combine more than one properties and create pretty nice effect to show the elements of your pages.

If you enjoyed this article, you might also like...

• No Related Post