Transitions

Transforms are a bit rough. They need some smoothness. Let's animate them!

.wt-demo-transform {
    border-style: solid;
    border-width: 1px;
    margin: auto;
    padding: 10px;
    width: 100px;

    transition: transform .5s;
}

.wt-demo-transform:hover {
    transform: perspective(100px) rotateY(405deg);
}

https://codepen.io/younes-jaaidi/pen/qMxpxY

The transition property takes 4 parameters:

1. The property we want to animate.

2. Transition duration.

3. Timing function (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier).

4. Delay to apply before starting the transition.

Multiple transitions

It is possible to apply transitions on multiple properties with different parameters.

.wt-demo-transition {
    border-style: solid;
    border-width: 1px;
    margin: auto;
    padding: 10px;

    height: 18px;
    width: 73px;

    transition: height 1s ease-in, width 1s ease-out 1s;
}

.wt-demo-transition:hover {
    height: 118px;
    width: 173px;
}

https://codepen.io/younes-jaaidi/pen/aaqEKq

For better user experience, use short transitions (less than 500ms).