Transition

Multiple Transitions

You can add multiple transitions to various transform properties.

💡

Hover or Click the following elements throughout this page to see how the various animations work.

.element {
        transition: 
        transform 0.3s ease-in-out, 
        opacity 300ms,
        border-radius 50%;
    }
    
.element:hover {
        transform: scale(1.4);
        opacity: 0.5;
        border-radius 300ms;
    }