HOLLA TECH - LEARN

CSS3 Transitions
 

CSS3 transitions allow us to change from one property value to another over a given duration.
transition-property – specifies the property to be transitioned
transition-duration – specifies the duration over which transitions should occur
transition-timing-function – specifies how the pace of the transition changes over its duration
transition-delay – specifies a delay (in seconds) for the transition effect

In the example below, we set the transition property to transform, with a duration of 5 seconds, and with an ease-in timing function that specifies a transition effect with a slow start. 

transition: transform 5s ease-in

 

NOTE!
Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more.

The Transition Property
 

In the example below, the div element has width and height of 50px, with a green background. We specified a transition effect for the width property, with a duration of 3 seconds:

The CSS will look like this:

div {
   width: 50px;
   height: 50px;
   background: #32CD32;
   transition: width 3s;
}
div:hover {
   width: 250px;
}

 

If you hover over the div element, it will move from left to right.

Holla Tech - Learn CSS3

NOTE!
When the cursor is moused out of the element, it will gradually change back to its original style.

transition-timing-function
 

The transition-timing-function property specifies the speed curve of the transition effect.
It can have the following values:
ease – the animation starts slowly, then accelerates quickly.
ease-in – starts slowly, then accelerates, and stops abruptly.
ease-out – starts quickly, but decelerates to a stop.
ease-in-out – similar to ease, but with more subtle acceleration and deceleration.
linear – constant speed throughout the animation; often best for color or opacity changes.

Finally, we have cubic-bezier(), which allows you to define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

transition-timing-function: cubic-bezier(0,0,1,1)

 

NOTE!
If no timing function is specified, the default value is ease.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT