Transitions Transformations Using CSS3

Transitions Transformations Using CSS3

CSS, TUTORIALS

Transitions Transformations Using CSS3




This lesson Transitions Transformations Using CSS3 will explains what is the benefits of the transition and transformations effects in CSS3 for giving better effects like button zooming , scaling and etc.
It reduces the time or increases the time of the effects taking time to complete the operations. Lets jump into the lesson with real time example and see the various attributes and options it can provide to us for better performance.
CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.
Browser Support for Transitions – Transitions Transformations Using CSS3
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
How to Use CSS3 Transitions? – Transitions Transformations Using CSS3
To create a transition effect, you must specify two things:
the CSS property you want to add an effect to
the duration of the effect
The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

The above shown is the style for the tag which are comes under the div element. Here we use the transition attribute with the delay of 2s. And we also used the prefixes for the transition effects.

See the Pen Transitions Examples by Santhoshkumar Sakthivel (@san2shkumar) on CodePen.

Transitions Transformations Using CSS3
Change Several Property Values – Transitions Transformations Using CSS3
The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

See the Pen Transition Examples 2 by Santhoshkumar Sakthivel (@san2shkumar) on CodePen.

Transitions Transformations Using CSS3
Specify the Speed Curve of the Transition – Transitions Transformations Using CSS3
The transition-timing-function property specifies the speed curve of the transition effect. The transition-timing-function property can have the following values:




ease – specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear – specifies a transition effect with the same speed from start to end
ease-in – specifies a transition effect with a slow start
ease-out – specifies a transition effect with a slow end
ease-in-out – specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) – lets you define your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can be used:

See the Pen Transition Examples 2 by Santhoshkumar Sakthivel (@san2shkumar) on CodePen.

Transitions Transformations Using CSS3
In the above example we have seen how to apply effects for the separate attributes, and we also set the transition for all the attributes in the hover effects. Lets do that in the following example,

See the Pen dpydNO by Santhoshkumar Sakthivel (@san2shkumar) on CodePen.

Transitions Transformations Using CSS3
Delay the Transition Effect – Transitions Transformations Using CSS3
The transition-delay property specifies a delay (in seconds) for the transition effect. The following example has a 1 second delay before starting:
The above example will shows you the power of the transitions and transformations. We hope this lesson will teach you something about the transitions and transformations effects.




Leave a Reply