Can You Hide an Element After a Delay Using Pure CSS Transitions?

Hiding Elements with CSS After a Delay

Eliminating the need for jQuery solutions, this question explores whether it's feasible to hide an element 5 seconds after a page's load using purely CSS transitions.

The Innovative Approach

Since CSS animations and transitions typically revolve around modifying properties like dimensions or visibility, the standard methods of hiding an element (e.g., setting display to hidden) aren't applicable here.

Therefore, a custom animation sequence solves this challenge. By animating height and width to zero after 5 seconds, the element effectively disappears from view while still occupying no space in the layout. Simultaneously, setting visibility to hidden ensures it remains imperceptible to the user.

Implementation and Example

The following code demonstrates how to implement this solution:

CSS:

#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden; /* In WebKit/Blink browsers */
        overflow: hidden;
    }
}

HTML:

<div>

Fiddle:

See the solution in action on JSFiddle: [link to fiddle]

The above is the detailed content of Can You Hide an Element After a Delay Using Pure CSS Transitions?. For more information, please follow other related articles on the PHP Chinese website!