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.
<styletype="text/css">img{height:100px;width:100px;transition-property:height;transition-duration:2s;transition-timing-function:linear;transition-delay:0.5s;}img:hover{height:200px;border:2px solid lightgreen;}</style>
<imgsrc="img/blog-img/lb-4.jpg"alt="blog-img"/>
Hover on this image
The transition-timing-function
linear
This value is used to keep the speed of same from start to end.
ease
This is basically default value of transition.This starts slow, run fast and
then become slow at the end.
ease-in
This value is used for starts slow and then speed up.
ease-out
This value is used for starts fast and then slow down.
ease-in-out
This value is basically very similar to ease value, it starts slowly
and then fast.
cubic-bezier(#,#,#,#)
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.
step-start
This value is used to change the transition state in one step like step-start.
step-end
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.
