16 September 2017

CSS Transition

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>

 

Start typing and press Enter to search