CSS3 transition and transform is are the great features of CSS3. It will let you animate, move, scale, skew and translate the elements with specified timing and duration. In this article you learn CSS3 transition property in depth and step by step with examples. At the end of this tutorial, you must be able to use this amazing features of css3 in you next projects.
What is CSS3 Transition and Transform?
Simple, transition is the amount of time or the period of time that you want the changes happen on you element and transform is different types of effects like; translate, scale, skew and rotate that you can apply on your page elements. Here is a basic example. We will to through explanations as well.
[codepen_embed height=”266″ theme_id=”0″ slug_hash=”wGXYMj” default_tab=”result” user=”Hujjat”]See the Pen CSS3 Transition Practice by Hujjat Nazari (@Hujjat) on CodePen.[/codepen_embed]
As you can see, when you hover on the box, it moves smoothly to right side. It takes only 2 second to move and that two second is defined by transition property. It moves to right side, it’s transform property with value of translate which move an element. You can check the code in CSS and HTML tabs.
Transition in Details
Transition property is shorten form of four other properties, transition-property, transition-duration, transition-delay and transition-timing-function. Instead of using those four properties, you can use only transition and give it all those arguments.
transition: property-name duration timing-function delay
Starting from delay: delay means, after how many seconds you want the timing-function happen and how long it should take and on which property it should effect.
transition: width 3s ease-in 2s;
It will happen after 2 second and take 3 second and it will change only width property. Here is live example, we will use hover. When user hover on the box, this all will happen.
[codepen_embed height=”266″ theme_id=”0″ slug_hash=”XdYxLj” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/XdYxLj/’>transition practicing</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
If you do not specify the property name, it will effect to all properties when someone hover over it.
What is Timing function?
Timing functions are different functions with different effects. You can check the list with full demo at this site and choose which one you want in your project.
Conclusion
There are a lot that you can do with CSS3, so in the next tutorials will talk about transform and animations that will make you CSS power user. I hope it has been informative for you, and if you have any question, feel free to comment it bellow in comments. 🙂
