Transitions

Code

/* Basic transition */
.button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

/* All-property transition */
.smooth {
    transition: all 0.3s ease;
}

/* Multi-property transition */
.multi-transition {
    transition: color 0.2s, background 0.3s 0.1s, transform 0.4s 0.2s;
}

/* Easing function */
.ease-in { transition: all 0.3s ease-in; }
.ease-out { transition: all 0.3s ease-out; }
.ease-in-out { transition: all 0.3s ease-in-out; }
.custom { transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Card flip */
.card {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.card:hover {
    transform: rotateY(180deg);
}

Explanation

transition smoothly animates property changes; you can specify property, duration, easing function, and delay.

More CSS Snippets