CSS Transition


Prev Tutorial Next Tutorial

CSS Transition

The CSS transitions are used to change effect on the Html element gradually (slowly-slowly) from one style to another, without using flash or JavaScript.

You need to specify two things for create CSS transition.

  • The CSS property on which you want to add an effect.
  • The time duration of the effect.

Note: Transition will we started when you move curson on it. You must need to specify time duration other wise Transition have no effect. The default time value is zero.

CSS width values

PropertyDescription
transitionA shorthand property for setting the four transition properties into a single property .
transition-delaySpecifies when the transition effect will start.
transition-durationSpecifies how many seconds or milliseconds a transition effect takes to complete .
transition-propertySpecifies the name of the CSS property the transition effect is for.
transition-timing-functionSpecifies the speed curve of the transition effect.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div {
    width: 100px;
    height: 100px;
    background: green;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 400px;
}
</style>  
</head>  
<body>  
<div>  </div>  
</body>  
</html>

Output

Multiple Change

If you want to add transition effects for more than one CSS property, separate the properties with a comma:

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div {
    width: 100px;
    height: 100px;
    background: cyan;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 3s, height 3s, transform 3s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}
</style>  
</head>  
<body>  
<div>  </div>  
</body>  
</html>

Output

Hover over me to see the transition effect!

Browser supported

Properties
transitionYesYesYesYesYes

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements