|

CSS 54 💻 transition-behavior, delay, duration and property

Bykronos

These four longhand properties give you precise control over how transitions behave — which properties animate, how long they take, when they start, and how discrete changes are handled.

Overview of Properties

PropertyDescriptionDefault
transition-propertyWhich properties to animateall
transition-durationHow long the transition takes0s
transition-delayWait before starting0s
transition-behaviorHow discrete properties animatenormal
transition-timing-functionSpeed curveease

1. transition-property

Specifies which CSS properties should transition.

.box {
    transition-property: background-color, transform;
}

Values

ValueDescription
noneNo properties transition
allAll animatable properties transition (default)
property-nameSpecific property (e.g., background-color)
MultipleComma-separated list

Best practice: Specify individual properties rather than all for better performance and predictability.

2. transition-duration

Specifies how long the transition takes.

.box {
    transition-duration: 1s, 2s;
}

Values

ValueDescription
0s / 0msNo transition (instant)
0.5sHalf a second
1sOne second
500ms500 milliseconds
MultipleComma-separated list for multiple properties

Key Point: If you specify multiple durations, they map to the properties in transition-property in order.

transition-property: background-color, transform;
transition-duration: 1s, 2s;
/* background-color: 1s, transform: 2s */

3. transition-delay

Specifies how long to wait before starting the transition.

.box {
    transition-delay: 0.5s;
}

Values

ValueDescription
0sStart immediately (default)
0.2sWait 200ms
0.5sWait half a second
1sWait one second
NegativeStarts partway through the transition
MultipleComma-separated list

Negative delay: A negative value starts the transition already partway through.

transition-delay: -0.5s; /* Starts halfway through a 1s transition */

4. transition-behavior

Specifies how discrete properties (like display, visibility) are animated.

.box {
    transition-behavior: allow-discrete;
}

Values

ValueDescription
normalDiscrete properties don’t animate (default)
allow-discreteDiscrete properties can animate

What Are Discrete Properties?

Discrete properties don’t have intermediate values — they jump from one state to another:

PropertyValues
displaynone, block, flex, etc.
visibilityvisible, hidden
positionstatic, relative, absolute
floatleft, right, none

Without allow-discrete: These properties change instantly — no animation.

With allow-discrete: They can be animated when combined with other properties (like opacity and transform).

5. transition-timing-function

Specifies the speed curve of the transition.

.box {
    transition-timing-function: ease-in;
}

Values

ValueDescription
easeSlow start, fast middle, slow end (default)
ease-inSlow start, fast end
ease-outFast start, slow end
ease-in-outSlow start, fast middle, slow end
linearConstant speed
step-startJump to end immediately
step-endStay at start until the end
cubic-bezier(n,n,n,n)Custom curve

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-behavior, delay, duration, and property</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            background: #f8f9fa;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== DEMO AREA ====== */
        .demo-area {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
            min-height: 200px;
        }

        /* ====== TRANSITION-PROPERTY DEMO ====== */
        .property-demo {
            width: 120px;
            height: 120px;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
            border-radius: 12px;
            cursor: pointer;
            text-align: center;
            padding: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .property-bg-only {
            transition-property: background-color;
            transition-duration: 0.5s;
            transition-timing-function: ease;
        }
        .property-bg-only:hover {
            background: #e74c3c;
            transform: scale(1.2) rotate(10deg);
        }

        .property-transform-only {
            transition-property: transform;
            transition-duration: 0.5s;
            transition-timing-function: ease;
        }
        .property-transform-only:hover {
            background: #e74c3c;
            transform: scale(1.2) rotate(10deg);
        }

        .property-both {
            transition-property: background-color, transform;
            transition-duration: 0.5s;
            transition-timing-function: ease;
        }
        .property-both:hover {
            background: #e74c3c;
            transform: scale(1.2) rotate(10deg);
        }

        /* ====== DURATION DEMO ====== */
        .duration-box {
            width: 100px;
            height: 100px;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border-radius: 12px;
            cursor: pointer;
            transition-property: transform;
            transition-timing-function: ease;
        }

        .duration-0-5:hover {
            transition-duration: 0.5s;
            transform: scale(1.3);
        }

        .duration-1:hover {
            transition-duration: 1s;
            transform: scale(1.3);
        }

        .duration-2:hover {
            transition-duration: 2s;
            transform: scale(1.3);
        }

        /* ====== DELAY DEMO ====== */
        .delay-box {
            width: 100px;
            height: 100px;
            background: #28a745;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border-radius: 12px;
            cursor: pointer;
            transition-property: transform;
            transition-duration: 0.5s;
            transition-timing-function: ease;
        }

        .delay-0:hover {
            transition-delay: 0s;
            transform: translateY(-40px);
        }

        .delay-0-5:hover {
            transition-delay: 0.5s;
            transform: translateY(-40px);
        }

        .delay-1:hover {
            transition-delay: 1s;
            transform: translateY(-40px);
        }

        /* ====== TIMING FUNCTION DEMO ====== */
        .timing-box {
            width: 100px;
            height: 100px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.75rem;
            border-radius: 12px;
            cursor: pointer;
            transition-property: transform;
            transition-duration: 1s;
        }

        .timing-ease {
            background: #007bff;
            transition-timing-function: ease;
        }
        .timing-ease:hover {
            transform: translateX(80px);
        }

        .timing-linear {
            background: #28a745;
            transition-timing-function: linear;
        }
        .timing-linear:hover {
            transform: translateX(80px);
        }

        .timing-ease-in {
            background: #dc3545;
            transition-timing-function: ease-in;
        }
        .timing-ease-in:hover {
            transform: translateX(80px);
        }

        .timing-ease-out {
            background: #ffc107;
            color: #333;
            transition-timing-function: ease-out;
        }
        .timing-ease-out:hover {
            transform: translateX(80px);
        }

        .timing-ease-in-out {
            background: #6c5ce7;
            transition-timing-function: ease-in-out;
        }
        .timing-ease-in-out:hover {
            transform: translateX(80px);
        }

        /* ====== TRANSITION-BEHAVIOR DEMO ====== */
        .behavior-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .behavior-card {
            width: 200px;
            padding: 20px;
            background: #007bff;
            color: white;
            border-radius: 12px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .behavior-card .hidden-content {
            display: none;
            margin-top: 10px;
            font-size: 0.85rem;
            font-weight: normal;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        /* Without allow-discrete */
        .behavior-normal {
            transition-property: background-color, display;
            transition-duration: 0.5s;
            transition-behavior: normal;
        }

        .behavior-normal:hover {
            background: #28a745;
        }

        .behavior-normal:hover .hidden-content {
            display: block;
            opacity: 1;
        }

        /* With allow-discrete */
        .behavior-discrete {
            transition-property: background-color, display, opacity;
            transition-duration: 0.5s;
            transition-behavior: allow-discrete;
        }

        .behavior-discrete:hover {
            background: #28a745;
        }

        .behavior-discrete:hover .hidden-content {
            display: block;
            opacity: 1;
        }

        /* ====== PRACTICAL: DROPDOWN ====== */
        .dropdown-container {
            position: relative;
            display: inline-block;
            margin: 20px;
        }

        .dropdown-trigger {
            padding: 12px 24px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            background: white;
            border: 2px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 10px 0;
            margin-top: 5px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition-property: opacity, visibility, transform;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }

        .dropdown-container:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-menu a {
            display: block;
            padding: 10px 20px;
            color: #333;
            text-decoration: none;
            transition: background 0.2s ease;
        }

        .dropdown-menu a:hover {
            background: #e9ecef;
            color: #007bff;
        }

        /* ====== PRACTICAL: MODAL ====== */
        .modal-trigger {
            padding: 12px 24px;
            background: #6c5ce7;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            margin: 20px;
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition-property: opacity, visibility;
            transition-duration: 0.3s;
            transition-behavior: allow-discrete;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 16px;
            max-width: 400px;
            text-align: center;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal-overlay:target {
            opacity: 1;
            visibility: visible;
        }

        .modal-overlay:target .modal-content {
            transform: scale(1);
        }

        .modal-content h3 {
            margin-top: 0;
            color: #6c5ce7;
        }

        .modal-close {
            display: inline-block;
            padding: 10px 20px;
            background: #dc3545;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            margin-top: 15px;
        }

        /* ====== TIPS ====== */
        .tip-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
            background: #f8f9fa;
        }

        .tip-box.success { border-left-color: #28a745; }
        .tip-box.warning { border-left-color: #ffc107; }
        .tip-box.danger { border-left-color: #dc3545; }
    </style>
</head>
<body>

    <h1>transition-behavior, delay, duration, and property</h1>

    <!-- ====== 1. TRANSITION-PROPERTY ====== -->
    <section>
        <h2>1. transition-property</h2>
        <p>Hover over each box to see which properties transition.</p>

        <div class="demo-area">
            <div class="property-demo property-bg-only">
                background-color<br>only
            </div>
            <div class="property-demo property-transform-only">
                transform<br>only
            </div>
            <div class="property-demo property-both">
                background + transform
            </div>
        </div>

        <div class="code-block">
            /* Only background-color transitions */
            .property-bg-only {
                transition-property: background-color;
                transition-duration: 0.5s;
            }

            /* Only transform transitions */
            .property-transform-only {
                transition-property: transform;
                transition-duration: 0.5s;
            }

            /* Both properties transition */
            .property-both {
                transition-property: background-color, transform;
                transition-duration: 0.5s;
            }
        </div>

        <p class="note">Use <code>transition-property</code> to control exactly which properties animate.</p>
    </section>

    <!-- ====== 2. TRANSITION-DURATION ====== -->
    <section>
        <h2>2. transition-duration</h2>
        <p>Hover over each box to compare the speed.</p>

        <div class="demo-area">
            <div class="duration-box duration-0-5">0.5s</div>
            <div class="duration-box duration-1" style="background: #28a745;">1s</div>
            <div class="duration-box duration-2" style="background: #dc3545;">2s</div>
        </div>

        <div class="code-block">
            .duration-0-5:hover {
                transition-duration: 0.5s;
                transform: scale(1.3);
            }

            .duration-1:hover {
                transition-duration: 1s;
                transform: scale(1.3);
            }

            .duration-2:hover {
                transition-duration: 2s;
                transform: scale(1.3);
            }
        </div>

        <p class="note">Multiple values can be set for multiple properties: <code>transition-duration: 1s, 2s;</code></p>
    </section>

    <!-- ====== 3. TRANSITION-DELAY ====== -->
    <section>
        <h2>3. transition-delay</h2>
        <p>Hover over each box to see the delayed transition.</p>

        <div class="demo-area">
            <div class="delay-box delay-0">0s</div>
            <div class="delay-box delay-0-5" style="background: #ffc107; color: #333;">0.5s</div>
            <div class="delay-box delay-1" style="background: #dc3545;">1s</div>
        </div>

        <div class="code-block">
            .delay-0:hover {
                transition-delay: 0s;
                transform: translateY(-40px);
            }

            .delay-0-5:hover {
                transition-delay: 0.5s;
                transform: translateY(-40px);
            }

            .delay-1:hover {
                transition-delay: 1s;
                transform: translateY(-40px);
            }
        </div>

        <p class="note">Negative delays start the transition partway through: <code>transition-delay: -0.5s;</code></p>
    </section>

    <!-- ====== 4. TRANSITION-TIMING-FUNCTION ====== -->
    <section>
        <h2>4. transition-timing-function</h2>
        <p>Hover over each box to compare the timing curves.</p>

        <div class="demo-area" style="flex-direction: column; gap: 15px; align-items: flex-start;">
            <div class="timing-box timing-ease">ease</div>
            <div class="timing-box timing-linear">linear</div>
            <div class="timing-box timing-ease-in">ease-in</div>
            <div class="timing-box timing-ease-out">ease-out</div>
            <div class="timing-box timing-ease-in-out">ease-in-out</div>
        </div>

        <div class="code-block">
            .timing-ease        { transition-timing-function: ease; }
            .timing-linear      { transition-timing-function: linear; }
            .timing-ease-in     { transition-timing-function: ease-in; }
            .timing-ease-out    { transition-timing-function: ease-out; }
            .timing-ease-in-out { transition-timing-function: ease-in-out; }
        </div>
    </section>

    <!-- ====== 5. TRANSITION-BEHAVIOR ====== -->
    <section>
        <h2>5. transition-behavior</h2>
        <p>Controls how <strong>discrete properties</strong> (like <code>display</code>) animate.</p>

        <div class="demo-area" style="flex-direction: column;">
            <div class="behavior-container">
                <div class="behavior-card behavior-normal">
                    <div>behavior: normal</div>
                    <div class="hidden-content">This content appears instantly (no transition on display)</div>
                </div>
                <div class="behavior-card behavior-discrete">
                    <div>behavior: allow-discrete</div>
                    <div class="hidden-content">This content can transition with opacity</div>
                </div>
            </div>
        </div>

        <div class="code-block">
            /* Without allow-discrete — display changes instantly */
            .behavior-normal {
                transition-property: background-color, display;
                transition-duration: 0.5s;
                transition-behavior: normal;
            }

            /* With allow-discrete — display can animate */
            .behavior-discrete {
                transition-property: background-color, display, opacity;
                transition-duration: 0.5s;
                transition-behavior: allow-discrete;
            }
        </div>

        <p class="note"><code>allow-discrete</code> is essential for animating <code>display</code>, <code>visibility</code>, and other discrete properties.</p>
    </section>

    <!-- ====== 6. PRACTICAL: DROPDOWN MENU ====== -->
    <section>
        <h2>6. Practical Example: Dropdown Menu</h2>
        <p>Hover over the button to see the dropdown with <code>allow-discrete</code>.</p>

        <div style="text-align: center;">
            <div class="dropdown-container">
                <button class="dropdown-trigger">Hover Me ▼</button>
                <div class="dropdown-menu">
                    <a href="#">🏠 Home</a>
                    <a href="#">📄 About</a>
                    <a href="#">⚙️ Services</a>
                    <a href="#">📞 Contact</a>
                </div>
            </div>
        </div>

        <div class="code-block">
            .dropdown-menu {
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                transition-property: opacity, visibility, transform;
                transition-duration: 0.3s;
                transition-behavior: allow-discrete;
            }

            .dropdown-container:hover .dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        </div>

        <p class="note">Without <code>allow-discrete</code>, the menu would appear/disappear instantly instead of fading in.</p>
    </section>

    <!-- ====== 7. PRACTICAL: MODAL ====== -->
    <section>
        <h2>7. Practical Example: Modal</h2>
        <p>Click the button to open a modal with a smooth fade-in.</p>

        <div style="text-align: center;">
            <a href="#modal" class="modal-trigger">Open Modal</a>
        </div>

        <div id="modal" class="modal-overlay">
            <div class="modal-content">
                <h3>🎉 Modal Title</h3>
                <p>This modal fades in using <code>transition-behavior: allow-discrete</code> with <code>visibility</code> and <code>opacity</code>.</p>
                <a href="#" class="modal-close">Close</a>
            </div>
        </div>

        <div class="code-block">
            .modal-overlay {
                opacity: 0;
                visibility: hidden;
                transition-property: opacity, visibility;
                transition-duration: 0.3s;
                transition-behavior: allow-discrete;
            }

            .modal-overlay:target {
                opacity: 1;
                visibility: visible;
            }
        </div>
    </section>

    <!-- ====== 8. REFERENCE TABLES ====== -->
    <section>
        <h2>8. Reference Tables</h2>

        <h3>Transition Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Default</th>
            </tr>
            <tr>
                <td><code>transition-property</code></td>
                <td>Which properties to animate</td>
                <td><code>all</code></td>
            </tr>
            <tr>
                <td><code>transition-duration</code></td>
                <td>How long the transition takes</td>
                <td><code>0s</code></td>
            </tr>
            <tr>
                <td><code>transition-delay</code></td>
                <td>Wait before starting</td>
                <td><code>0s</code></td>
            </tr>
            <tr>
                <td><code>transition-behavior</code></td>
                <td>How discrete properties animate</td>
                <td><code>normal</code></td>
            </tr>
            <tr>
                <td><code>transition-timing-function</code></td>
                <td>Speed curve</td>
                <td><code>ease</code></td>
            </tr>
        </table>

        <h3>transition-property Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>No properties transition</td>
            </tr>
            <tr>
                <td><code>all</code></td>
                <td>All animatable properties transition</td>
            </tr>
            <tr>
                <td><code>property-name</code></td>
                <td>Specific property (e.g., <code>background-color</code>)</td>
            </tr>
            <tr>
                <td>Multiple</td>
                <td>Comma-separated list</td>
            </tr>
        </table>

        <h3>transition-behavior Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Discrete properties don't animate (default)</td>
            </tr>
            <tr>
                <td><code>allow-discrete</code></td>
                <td>Discrete properties can animate</td>
            </tr>
        </table>

        <h3>Discrete Properties (Common)</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Values</th>
            </tr>
            <tr>
                <td><code>display</code></td>
                <td><code>none</code>, <code>block</code>, <code>flex</code></td>
            </tr>
            <tr>
                <td><code>visibility</code></td>
                <td><code>visible</code>, <code>hidden</code></td>
            </tr>
            <tr>
                <td><code>position</code></td>
                <td><code>static</code>, <code>relative</code>, <code>absolute</code></td>
            </tr>
            <tr>
                <td><code>float</code></td>
                <td><code>left</code>, <code>right</code>, <code>none</code></td>
            </tr>
        </table>

        <h3>Timing Functions</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>ease</code></td>
                <td>Slow start, fast middle, slow end</td>
            </tr>
            <tr>
                <td><code>linear</code></td>
                <td>Constant speed</td>
            </tr>
            <tr>
                <td><code>ease-in</code></td>
                <td>Slow start, fast end</td>
            </tr>
            <tr>
                <td><code>ease-out</code></td>
                <td>Fast start, slow end</td>
            </tr>
            <tr>
                <td><code>ease-in-out</code></td>
                <td>Slow start, fast middle, slow end</td>
            </tr>
            <tr>
                <td><code>step-start</code></td>
                <td>Jump to end immediately</td>
            </tr>
            <tr>
                <td><code>step-end</code></td>
                <td>Stay at start until the end</td>
            </tr>
            <tr>
                <td><code>cubic-bezier(n,n,n,n)</code></td>
                <td>Custom curve</td>
            </tr>
        </table>
    </section>

    <!-- ====== 9. BEST PRACTICES ====== -->
    <section>
        <h2>9. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>transition-property</code> to specify exact properties (not <code>all</code>)</li>
                <li>Use <code>transition-behavior: allow-discrete</code> for <code>display</code>/<code>visibility</code></li>
                <li>Use <code>transition-delay</code> for staggered animations</li>
                <li>Keep durations short (0.2s–0.5s) for UI feedback</li>
                <li>Use <code>ease-out</code> for entering elements and <code>ease-in</code> for exiting</li>
                <li>Test with <code>prefers-reduced-motion</code> for accessibility</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use <code>transition-property: all</code> for everything</li>
                <li>Don't forget <code>allow-discrete</code> when animating <code>display</code></li>
                <li>Don't use long delays for critical UI feedback</li>
                <li>Don't animate layout properties (<code>width</code>, <code>height</code>)</li>
                <li>Don't forget that negative delays start partway through</li>
                <li>Don't use transitions without respecting <code>prefers-reduced-motion</code></li>
            </ul>
        </div>

        <div class="code-block">
            /* Accessibility: respect reduced motion */
            @media (prefers-reduced-motion: reduce) {
                .box,
                .dropdown-menu,
                .modal-overlay {
                    transition: none;
                }
            }

            /* Best practice: specify exact properties */
            .box {
                transition-property: background-color, transform;
                transition-duration: 0.3s, 0.5s;
                transition-timing-function: ease, ease-out;
            }

            /* Enable discrete animations */
            .dropdown {
                transition-property: opacity, visibility;
                transition-duration: 0.3s;
                transition-behavior: allow-discrete;
            }
        </div>
    </section>

</body>
</html>

Quick Reference

PropertyDescriptionDefault
transition-propertyWhich properties to animateall
transition-durationHow long the transition takes0s
transition-delayWait before starting0s
transition-behaviorHow discrete properties animatenormal
transition-timing-functionSpeed curveease

transition-property Values

ValueDescription
noneNo properties transition
allAll animatable properties transition
property-nameSpecific property
MultipleComma-separated list

transition-behavior Values

ValueDescription
normalDiscrete properties don’t animate (default)
allow-discreteDiscrete properties can animate

Discrete Properties (Common)

PropertyValues
displaynone, block, flex
visibilityvisible, hidden
positionstatic, relative, absolute
floatleft, right, none

Best Practices

✅ Do This:

/* Specify exact properties */
.box {
    transition-property: background-color, transform;
    transition-duration: 0.3s, 0.5s;
    transition-timing-function: ease, ease-out;
}

/* Animate display with allow-discrete */
.dropdown {
    transition-property: opacity, visibility, transform;
    transition-duration: 0.3s;
    transition-behavior: allow-discrete;
}

/* Staggered animation with delay */
.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.1s; }
.item:nth-child(3) { transition-delay: 0.2s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .box {
        transition: none;
    }
}

❌ Don’t Do This:

/* Don't use transition-property: all */
.box {
    transition-property: all; /* Unpredictable and less performant */
}

/* Don't forget allow-discrete */
.modal {
    transition-property: visibility, opacity; /* visibility won't animate */
}

/* Don't use long delays for UI */
.btn:hover {
    transition-delay: 2s; /* Users will think it's broken */
}

/* Don't animate layout properties */
.box {
    transition-property: width, height; /* Causes layout recalculation */
}

Pro Tip: The transition-behavior: allow-discrete property is a game-changer for UI animations. Before it, you couldn’t animate display or visibility — modals, dropdowns, and tooltips would just pop in and out. Now you can create smooth fade-in/fade-out animations for these elements. Use it with opacity and visibility for dropdowns and modals. Remember: transition-property should be specific (not all) for better performance and predictability, and always respect prefers-reduced-motion for users who are sensitive to animation!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!