Transition in CSS3

In CSS3 transition property is used to change the values of property while having some specific condition like direction, speed and delay in transition. While for this , user is completely allowed. Actually this property consists on both the transform and animation property. This is the reason of popularity of transition in designing.

There are following properties of transition
1) transition-property
2) transition-duration
3) transition-duration
4) transition-delay
To apply there properties on an element you also need something to trigger the transition. A state change such as :hover, :focus, or :active makes a good trigger.

Example of transition property

In this example height of image will increase by 100px and also a border of 2px solid lightgreen will applied on it.

<style type="text/css">
img {
  height: 100px;
  width: 100px;
  transition-property: height;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 0.5s;
  height: 200px;
  border:  2px solid lightgreen;
<img src="img/blog-img/lb-4.jpg" alt="blog-img"/>

Hover on this image

The transition-timing-function

This value is used to keep the speed of same from start to end.
This is basically default value of transition.This starts slow, run fast and then become slow at the end.
This value is used for starts slow and then speed up.
This value is used for starts fast and then slow down.
This value is basically very similar to ease value, it starts slowly and then fast.
This value is used to allow the user to specify the values.
steps(#, start|end)
This value is used to allow the user to put the steps in transition.
This value is used to change the transition state in one step like step-start.
This value is used to change the transition state in one step at the end.

The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.