How to use CSS3 transition effect, give examples?

CSS3 is new and introduced awesome features like transform, transition etc., Some of these effects you can only see when you roll over the mouse in that.

In order to create css3 transition effect, give it in hover effect, it works perfectly.

To create a transition effect, you must specify two things:

the CSS property you want to add an effect to
the duration of the effect.

You need to transform the element beform transition.

.buttonstyle22 {
width: 100px;
height: 30px;
background: blue;
transition: background 2s;
}

Here i applied transition to background, you can apply it to total element also.

If you want to apply transform and transition property for button like :

.buttonstyle22
{
width: 100px;
height: 30px;
background: blue;
transition: width 2s, height 2s, transform 2s;
}

.buttonstyle22:hover
{
width:150px;
height:150px;
transform : rotate(360deg);
}

There are more properties of transition like transition - delay | duration | property | timing-function.

For more detail refer this site : https://www.w3schools.com/cssref/css3_pr_transition.asp.

I hope this will help you.

A CSS3 Transition Effect is a such an effect that lets an element gradually change from one style to another style. CSS3 Transition Effect is best suited for animation uses. But still a lot can be done without using the animation. A user interface is necessary to see the effects of transition.

CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus , to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.