What is Simple fade IN / fade out on hover using css3?

Simple fade IN / fade out on hover using css3 is relevant when you want a more stable WordPress setup, better performance, and fewer production issues.

How do you implement Simple fade IN / fade out on hover using css3?

Start with a baseline audit, define scope and constraints, then roll out improvements in small, testable steps.

Why is Simple fade IN / fade out on hover using css3 important?

The biggest gains usually come from technical quality, clear information structure, and regular verification.

CSS Transition Tutorial - Smooth Hover Effects | webdesign

In the old days (jQuery era), we used .animate() or .fadeIn() for hover effects. In 2026, using JavaScript for this is a crime against performance.

CSS3 transition is hardware accelerated (handled by the GPU), smoother, and requires zero scripts.

Why CSS transitions beat javascript

Performance Benefits:

GPU Acceleration: CSS transitions run on the graphics card, not the CPU
No JavaScript Execution: Zero script overhead, instant response
Browser Optimization: Browsers optimize CSS animations natively
Battery Friendly: Less CPU usage means longer battery life on mobile

The Numbers:

JavaScript animation: ~16ms per frame (60fps target)
CSS transition: <1ms overhead, browser handles the rest
File size: CSS is smaller than jQuery/JavaScript libraries

Basic fade effect

Let’s say you have an image that should dim when you hover over it.

/* The Element */
.hover-image {
    opacity: 1;
    /* The Magic Part */
    transition: opacity 0.3s ease-in-out;
}

/* The Trigger */
.hover-image:hover {
    opacity: 0.7;
}

What happens:

Image starts at opacity: 1 (fully visible)
On hover, transitions to opacity: 0.7 (30% transparent)
Takes 0.3 seconds with smooth easing
Returns to opacity: 1 when hover ends

Understanding transition properties

Transition-property

Specifies which CSS property to animate. Always specify specific properties instead of all for better performance.

/* Good: Specific property */
transition: opacity 0.3s ease-in-out;

/* Better: Multiple specific properties */

/* Avoid: Animates ALL properties (performance hit) */

Animatable Properties:

opacity - Fade in/out
transform - Scale, rotate, translate
background-color - Color changes
width, height - Size changes (use transform instead)
border-radius - Rounded corners
box-shadow - Shadow effects

Non-animatable (avoid):

display - Use opacity + visibility instead
font-family - Instant change only

Transition-duration

How long the animation takes. Common values:

/* Very fast (subtle) */
transition: opacity 0.15s;

/* Standard (sweet spot for UI) */

/* Slow (dramatic) */

/* Very slow (rarely used) */

Best Practices:

0.2-0.3s: Standard UI interactions (buttons, links)
0.15s: Micro-interactions (tooltips, badges)
0.4-0.6s: Page transitions, modal animations
>1s: Avoid (feels sluggish)

Transition-timing-function

Controls the acceleration curve. This is what makes animations feel “natural.”

/* Linear: Constant speed (robotic) */
transition: opacity 0.3s linear;

/* Ease: Slow start, fast middle, slow end (default) */

/* Ease-in: Slow start, fast end */

/* Ease-out: Fast start, slow end (most natural) */

/* Ease-in-out: Slow start and end, fast middle (very smooth) */

/* Custom cubic-bezier (advanced) */

When to Use Each:

ease-out: Most UI elements (feels responsive)
ease-in-out: Smooth, elegant transitions
ease-in: Elements appearing (less common)
linear: Progress bars, loading indicators
cubic-bezier: Custom feel (use tools like cubic-bezier.com)

Complete shorthand syntax

transition: [property] [duration] [timing-function] [delay];

Examples:

/* Single property */

/* Multiple properties */

/* With delay */

/* Different durations per property */

Advanced hover effects

1. Fade + scale (zoom effect)

Combine opacity and transform for a modern zoom effect:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

Why this works:

scale(1.05) zooms image 5% larger
Opacity slightly reduces for depth
Different durations create layered effect

2. Fade + overlay text

Perfect for image galleries:

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.image-container:hover img {
    opacity: 0.7;
    transform: scale(1.1);
}

.image-container:hover .overlay {
    opacity: 1;
}

3. Fade + color change

For buttons and links:

.button {
    background-color: #0073aa;
    color: white;
    opacity: 1;
    transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
}

.button:hover {
    opacity: 0.9;
    background-color: #005177;
}

.button:active {
    opacity: 0.8;
    transform: scale(0.98);
}

4. Fade + shadow

Add depth on hover:

.card {
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.card:hover {
    opacity: 0.95;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transform: translateY(-4px);
}

Performance optimization

Use transform instead of position/Size

Bad (triggers layout recalculation):

.element {
    left: 0;
    transition: left 0.3s;
}
.element:hover {
    left: 100px;
}

Good (GPU accelerated):

.element {
    transform: translateX(0);
    transition: transform 0.3s;
}
.element:hover {
    transform: translateX(100px);
}

Limit animated properties

Bad:

transition: all 0.3s; /* Animates everything */

Good:

Use will-change for complex animations

.animated-element {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

Note: Only use will-change on elements that will actually animate. Remove it when animation completes.

Real-World examples

Example 1: Product card

.product-card {
    position: relative;
    overflow: hidden;
}

.product-card img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover img {
    opacity: 0.8;
    transform: scale(1.1);
}

.product-card .badge {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-out 0.1s;
}

.product-card:hover .badge {
    opacity: 1;
}

.nav-link {
    border-bottom: 2px solid transparent;
    transition: opacity 0.2s ease-out, border-color 0.2s ease-out;
}

.nav-link:hover {
    opacity: 1;
    border-bottom-color: #0073aa;
}

.nav-link.active {
    opacity: 1;
    border-bottom-color: #0073aa;
}

Example 3: Image gallery

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    opacity: 1;
    filter: brightness(1);
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.4s ease-out;
}

.gallery-item:hover img {
    opacity: 0.9;
    filter: brightness(0.8);
    transform: scale(1.05);
}

.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.gallery-item:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

Browser compatibility

CSS transitions are supported in all modern browsers:

Chrome/Edge: Full support (since version 26)
Firefox: Full support (since version 16)
Safari: Full support (since version 6.1)
Opera: Full support (since version 12.1)
IE: Partial support (IE 10+)

Fallback for Older Browsers:

/* Modern browsers */
.element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.element:hover {
    opacity: 0.7;
}

/* Fallback: Instant change (no animation) */
/* Older browsers will just show the end state */

Common mistakes to avoid

Mistake 1: Using `all`

/* Bad: Animates everything, performance hit */
transition: all 0.3s;

/* Good: Specific properties */

Mistake 2: Too long duration

/* Bad: Feels sluggish */

/* Good: Snappy and responsive */

Mistake 3: Animating layout properties

/* Bad: Triggers layout recalculation */

/* Good: Use transform instead */

Mistake 4: Missing hover state

/* Bad: No hover state defined */
.element {
    transition: opacity 0.3s;
}

/* Good: Define both states */
.element {
    opacity: 1;
    transition: opacity 0.3s;
}
.element:hover {
    opacity: 0.7;
}

Testing and debugging

Chrome devtools

Open DevTools (F12)
Select element with transition
Check “Animations” tab
See timeline and properties
Adjust timing in real-time

Firefox devtools

Open DevTools (F12)
Select element
Check “Animations” panel
Visualize animation curve

Test performance

/* Add this temporarily to see what's animating */
* {
    outline: 1px solid red !important;
}

Then check which elements are repainting (red flash = performance issue).

Summary

CSS transitions are the modern, performant way to create hover effects. They’re:

✅ Fast: GPU accelerated, zero JavaScript
✅ Smooth: Browser-optimized animations
✅ Simple: One line of CSS
✅ Accessible: Respects prefers-reduced-motion
✅ Maintainable: Easy to modify and debug

Key Takeaways:

Use specific properties, not all
0.2-0.3s is the sweet spot for UI interactions
ease-out feels most natural
Use transform instead of position/size properties
Combine multiple properties for rich effects
Test on real devices for performance

In 2026, CSS transitions are the standard for hover effects. JavaScript animations are only needed for complex, interactive animations that CSS can’t handle.

CSS Animations vs Transitions

When to use animations vs transitions

Transitions:

Triggered by state changes (hover, focus, active)
Two states: from → to
Simple, predictable
Best for: buttons, links, cards, images

Animations (@keyframes):

Complex multi-step sequences
Runs automatically or on trigger
Can loop, pause, reverse
Best for: loading spinners, complex effects, continuous motion

Basic @keyframes animation

/* Define the animation */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Apply the animation */
.fade-animation {
    animation: fadeInOut 2s ease-in-out infinite;
}

/* Animation on hover */
.fade-on-hover:hover {
}

Animation properties in detail

.element {
    /* Name and duration */
    animation-name: fadeIn;
    animation-duration: 0.5s;

    /* Timing function */
    animation-timing-function: ease-in-out;

    /* Delay before start */
    animation-delay: 0.2s;

    /* How many times to play */
    animation-iteration-count: infinite; /* or 1, 2, 3... */

    /* Direction */
    animation-direction: normal; /* normal, reverse, alternate, alternate-reverse */

    /* Play state (for pausing) */
    animation-play-state: running; /* or paused */

    /* Fill mode (styles before/after) */
    animation-fill-mode: forwards; /* none, forwards, backwards, both */

    /* Shorthand */
    animation: fadeIn 0.5s ease-in-out 0s 1 normal forwards;
}

/* Pause animation on hover */
.animated-element:hover {
    animation-play-state: paused;
}

Complex hover animation example

/* Pulsing CTA button */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(0, 115, 170, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 115, 170, 0);
    }
}

.cta-button {
    animation: pulse 2s infinite;
}

.cta-button:hover {
}

Advanced Hover Effects

1. Reveal hidden content

.reveal-container {
    position: relative;
    overflow: hidden;
}

.reveal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.reveal-container:hover .reveal-content {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from bottom variant */
.slide-bottom {
}
.slide-bottom:hover {
}

/* Slide from top variant */
.slide-top {
}
.slide-top:hover {
}

/* Slide from left variant */
.slide-left {
}
.slide-left:hover {
}

/* Slide from right variant */
.slide-right {
}
.slide-right:hover {
}

2. Blur effect

.blur-hover img {
    filter: blur(0);
    transition: filter 0.3s ease-in-out;
}

.blur-hover:hover img {
    filter: blur(5px);
}

/* Blur + scale combination */
.blur-scale {
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.blur-scale:hover {
    filter: blur(3px) brightness(0.8);
    transform: scale(1.05);
}

3. Grayscale to color

.grayscale-to-color img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.grayscale-to-color:hover img {
    filter: grayscale(0%);
}

/* Partial grayscale (80%) */
.partial-grayscale img {
    transition: filter 0.3s ease-in-out;
}

.partial-grayscale:hover img {
    filter: grayscale(0%);
}

4. Tilt effect

.tilt-card {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.tilt-card-inner {
    position: relative;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 0.3s ease-out;
    transform-style: preserve-3d;
}

.tilt-card:hover .tilt-card-inner {
    transform: rotateX(5deg) rotateY(5deg);
}

/* More dramatic tilt */
.tilt-card.dramatic:hover .tilt-card-inner {
}

5. Glitch effect

@keyframes glitch {
    0% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-5px, 0);
    }
    20% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(5px, 0);
    }
    40% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(-5px, 0);
    }
    60% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(5px, 0);
    }
    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-5px, 0);
    }
    100% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(5px, 0);
    }
}

.glitch-effect:hover {
    animation: glitch 0.3s linear infinite;
}

CSS Custom Properties (Variables)

Using variables for reusable effects

:root {
    --transition-duration: 0.3s;
    --transition-easing: ease-in-out;
    --hover-opacity: 0.8;
    --hover-scale: 1.05;
}

.hover-effect {
    opacity: 1;
    transition: opacity var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing);
}

.hover-effect:hover {
    opacity: var(--hover-opacity);
    transform: scale(var(--hover-scale));
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
    :root {
        --hover-opacity: 0.9;
    }
}

Scoped variables

.card-grid {
    --card-transition: 0.3s ease-out;
    --card-hover-transform: translateY(-5px);
}

.card {
    transition: all var(--card-transition);
}

.card:hover {
    transform: var(--card-hover-transform);
}

/* Button variant */
.button-grid {
    --btn-transition: 0.2s ease;
    --btn-hover-opacity: 0.85;
}

.btn {
    transition: all var(--btn-transition);
}

.btn:hover {
    opacity: var(--btn-hover-opacity);
}

Accessibility Considerations

Respecting reduced motion

/* Default: animations enabled */
.animated-element {
    transition: opacity 0.3s ease-in-out;
    animation: fadeIn 0.5s ease-in-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: none;
        animation: none;
    }
}

/* Alternatively: provide subtle alternative */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: opacity 0.1s ease;
    }

    .complex-animation {
        animation: none;
        opacity: 1;
    }
}

Focus states

/* Ensure hover effects also work on focus */
.interactive-element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.interactive-element:hover,
.interactive-element:focus {
    opacity: 0.8;
    transform: scale(1.02);
}

/* Focus visible for keyboard navigation */
.interactive-element:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

Touch device considerations

/* Remove hover effects on touch devices */
@media (hover: none) {
    .hover-only-effect:hover {
        /* No hover state */
        transform: none;
    }
}

/* Enable hover effects only on devices with hover */
@media (hover: hover) {
    .hover-only-effect {
        transition: transform 0.3s ease-in-out;
    }

    .hover-only-effect:hover {
        transform: scale(1.05);
    }
}

Performance Deep Dive

Understanding browser rendering

Browser rendering pipeline:

Style - Calculate CSS rules
Layout - Calculate element positions (expensive!)
Paint - Draw pixels (expensive!)
Composite - Layer merging (GPU accelerated)

Properties by performance cost:

Property	Cost	Notes
`opacity`	Low	Composite only
`transform`	Low	GPU accelerated
`filter`	Medium	Can be GPU accelerated
`background-color`	Medium	Repaint required
`width/height`	High	Layout recalculation
`top/left`	High	Layout recalculation
`box-shadow`	High	Repaint required

Using CSS containment

.animated-container {
    contain: layout paint;
    /* Isolates the element for better performance */
}

.animated-child {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

Optimizing for Core Web Vitals

CLS (Cumulative Layout Shift):

/* Reserve space to prevent layout shift */
.animated-element {
    transform: translateZ(0); /* Creates a new compositing layer */
    backface-visibility: hidden; /* Better performance */
}

INP (Interaction to Next Paint):

/* Quick transitions for responsiveness */
.responsive-element {
    transition: transform 0.15s ease-out; /* Fast response */
}

WordPress Integration

Adding CSS via customizer

// Add to functions.php
function wppoland_custom_css() {
    ?>
    <style type="text/css">
        /* Custom hover effects */
        .custom-hover img {
            opacity: 1;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }

        .custom-hover:hover img {
            opacity: 0.85;
            transform: scale(1.03);
        }

        /* Button hover */
        .custom-button {
            transition: all 0.2s ease-out;
        }

        .custom-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
    </style>
    <?php
}
add_action('wp_head', 'wppoland_custom_css');

Gutenberg block styles

/* WordPress block editor styles */
.wp-block-image .hover-effect img {
    transition: all 0.3s ease-in-out;
}

.wp-block-image .hover-effect:hover img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

/* Cover block hover */
.wp-block-cover .hover-cover {
    transition: transform 0.4s ease-in-out;
}

.wp-block-cover:hover .hover-cover {
    transform: scale(1.02);
}

Elementor widgets

/* Elementor image box */
.elementor-image-box-img {
    transition: all 0.3s ease-in-out;
}

.elementor-image-box:hover .elementor-image-box-img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Elementor button */
.elementor-button {
    transition: all 0.2s ease-in-out;
}

.elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

CSS Frameworks Integration

Tailwind CSS

<!-- Tailwind hover utilities -->
<img class="transition-all duration-300 ease-in-out hover:opacity-80 hover:scale-105"
     src="image.jpg" alt="Hover effect with Tailwind">

<!-- Custom transition -->
<button class="transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-lg">
    Hover me
</button>

Bootstrap

/* Bootstrap custom hover */
.custom-hover {
    transition: all 0.3s ease-in-out;
}

.custom-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Override Bootstrap transitions */
.btn-custom {
    transition: all 0.2s ease-out;
}

Custom CSS Grid with hover

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card-grid .card {
    transition: all 0.3s ease-in-out;
}

.card-grid .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Staggered animation */
.card-grid .card:nth-child(1) { transition-delay: 0ms; }
.card-grid .card:nth-child(2) { transition-delay: 50ms; }
.card-grid .card:nth-child(3) { transition-delay: 100ms; }
.card-grid .card:nth-child(4) { transition-delay: 150ms; }

FAQ - Common Questions

How do I make hover effects work on mobile?

Mobile devices don’t have “hover” in the traditional sense. Use :active or JavaScript touch events:

/* Touch feedback */
.interactive-element:active {
    opacity: 0.8;
    transform: scale(0.98);
}

Why is my animation laggy?

Check for: animating layout properties (width, height), too many animated elements, missing GPU acceleration. Use transform and opacity only.

How to create a loading animation?

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0073aa;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

How to animate SVG icons?

.icon {
    transition: fill 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.icon:hover {
    fill: #0073aa;
    transform: scale(1.1);
}

/* Animated SVG stroke */
.svg-stroke {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.5s ease-in-out;
}

.svg-stroke:hover {
    stroke-dashoffset: 0;
}

How to create a flip card effect?

.flip-card {
    perspective: 1000px;
    width: 300px;
    height: 200px;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-back {
    background-color: #0073aa;
    color: white;
    transform: rotateY(180deg);
}

How to prevent hover “sticking” on touch devices?

@media (hover: hover) {
    .hover-effect:hover {
        /* Hover styles */
    }
}

/* Or use JavaScript touch detection */

Complete Reference: Transition Values

Property	Default	Common Values
`transition-property`	all	opacity, transform, filter
`transition-duration`	0s	0.2s, 0.3s, 0.5s, 1s
`transition-timing-function`	ease	ease, linear, ease-in, ease-out, ease-in-out
`transition-delay`	0s	0.1s, 0.2s, 0.5s

Timing functions reference:

/* Preset */
ease        /* Slow start, fast middle, slow end */
linear       /* Constant speed */
ease-in      /* Slow start, fast end */
ease-out     /* Fast start, slow end */
ease-in-out  /* Slow start and end */

/* Custom bezier */
cubic-bezier(0.4, 0.0, 0.2, 1)      /* Material Design */
cubic-bezier(0.25, 0.46, 0.45, 0.94) /* Smooth */

/* Steps */
steps(5)       /* 5 discrete steps */
steps(5, start)  /* Start immediately */
steps(5, end)    /* Wait before starting */

Quick Reference: Effect Presets

Subtle:

transition: all 0.2s ease-out;

Standard:

Smooth:

Bounce:

Quick:

Keywords: CSS hover effects, CSS transitions, CSS animation, fade in fade out, hover animation, CSS transform, CSS opacity, CSS keyframes, CSS3 transitions, hover effects tutorial, CSS animation tutorial, smooth animations, GPU acceleration, performance CSS animations, responsive hover effects, touch device hover, accessibility animations, WordPress CSS hover, Gutenberg block styles, Elementor hover effects, Tailwind hover utilities.