Transitions in CSS

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Transitions in CSS allows us to control how the transition takes place between the two states of the element. For example, when we hovering the mouse over a button, we can change the background color, dimensions, shape of the element with the help of CSS selector, and pseudo-class. We can change any other or combination of properties over a duration of time, though. The transition allows us to determine how the change in color and dimensions takes place. We can use the transitions to animate the changes, and make the changes visually alluring and attractive to the user and hence, giving better user experience and involvement.

Transition is an effective way of representing the change in state, and different styles for each state. The straightforward way for directing styles for different states is by using the: hover, :focus, :active, and :target pseudo-classes.

transition: property|duration|timing-function|delay

Transition Properties are as follows:

• transition
  
• transition-delay(specifies the delay in transition effect)
  
• transition-duration(specifies the duration of effect in seconds)
  
• transition-property(specifies the name of property to which css applies)
  
• transition-timing-function(specifies how intermediate values will be calculated,allows transition to change speed over its duration)
  
  
  To apply the transition effect we need to specify two things
  

1. transition property
   
2. transition duration
   
   
   
   Transitions are a set of properties that allows front-end website and webapp developers to smoothly change the values of a specific CSS property over a given time.
   
   
   The use the shorthand transition property to control CSS transitions as well the use of this shorthand is not only easy, but it can also avoid out-of-sync parameters that can be quite annoying to debug in CSS.
   
   
   Here's a simple transition example:
   

div {
  width: 80px;
  height: 80px;
  background: yellow;
  transition: width 2s;
}
div:hover {
  width: 200px;
}

Before hovering:

After hovering:



A value of none means that no property will transition. Likewise, a list of properties to be transitioned, or the keyword all indicates that all properties are to be transitioned.

Transition delay property can have the following values:
transition-delay: time|initial|inherit;

1. time - specifies seconds to wait for transition to take place
2. initial - set property to default value
3. inherit - inherit property from parent element

Transition duration property can have the following values:
transition-duration: time|initial|inherit;

1. time - specifis seconds a transition effect takes to complete.
2. initial - set property to default value.
3. inherit - inherit property from parent element.

Transition property can have the following values:
transition-property: none|all|property|initial|inherit;

1. none - no transition effect will take place.
2. all - all transition properties will take place.
3. property - Defines a comma separated list of CSS property names the transition effect is for.

Transition-timing-function property can have the following values:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end

1. ease - specifies a transition with slow start,then fast and end slowly.
2. linear - specifies transition with same speed from start to end.
3. ease-in - specifies a transition with slow start.
4. ease-out - specifies transition with slow end.
5. ease-in-out - specifies transition with slow start and end.
6. cubic-bezier - Define your own values in the cubic-bezier function(values from 0 to 1).
   
   
   Here's an example using all the transition properties:
   

div {
  width: 50px;
  height: 50px;
  background: #8DFF33;
  transition-property: height;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
}
div:hover {
  height: 200px;
}

Before hovering:

After hovering:

here's an example showing transition code for different browsers:

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.box:hover {
  background-color: green;
  cursor: pointer;
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

Before hovering:

After hovering:

Apllications of transitions:
1.CSS transitions provide a way to control animation speed when changing CSS properties.
2.CSS transitions helps to add an animated look and feel to the web page.
3.CSS transitions can be used along with CSS tranform to create graphics.

With this article at OpenGenus, you must have a good idea of transitions in CSS.