By Cesar Olivas
Transforms, Animations and Transitions are new modules of CSS3. These 3 modules of CSS are still as a working draft and we can only do as much as it only works in webkit engine but they allow us to see the potential of these properties. This post will explain briefly what can be done using these, as they are something different, that allow us to add eye candy to our pages without fancy JavaScript.
Notes:
The red border on the divs are just to point to the top of the box
These Examples will only work on Safari and Google chrome.
A live example can be seen at http://www.sieena.com/Pages/transforms_animations_transitions.html
Added to the CSS that I will mention, all of these examples only have this basic html.
2D Transforms
This module will help us move any object through the page. This property sets a local X-Y axis in which the objet will move, rotate or resize in a 2D plane.
Translate
This will move an object through X and Y of its axis.
Code
Result
Rotate and Translate
This section uses the translate function, but it also adds the rotate function. This can be very useful as we would not have to, let’s say, create a new image if we want it rotated, we can only rotate it with CSS.
Code
Result
Scale, Rotate and Translate
Again, the Translate and Rotate functions are used, and scale function is implemented too.
Code
Result
Transitions
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Basically, instead of just abruptly changing, it will change during a specified time frame, making a smooth transition.
Timing and Changing Properties
This example will make a transition from a basic state, to a different one when hovered. First, you have to mention the properties that are going to change, then the duration and the timing function. Then when hovered, the properties will change during the specified time.
Code
Result
Animation
This function will animate an object using different properties and adjusting them over time. First, you have to indicate the effect to use. For this example is pulse.
Then you can set how you are going to animate it using different properties such as the amount of scaling moving it to the final state. This animation will occur on hover 10 times.
Code
