Can you hide an element after 5 seconds using only CSS?

CSS Auto Hiding Elements after 5 Seconds

Can you hide an element 5 seconds after a page load using CSS? A jQuery solution is certainly feasible, but is it possible to achieve this using CSS transition?

The Answer: Yes

However, there's a twist. CSS transitions cannot be applied to properties like "display" or dimensions to achieve true hiding. Instead, create an animation for the element and toggle its visibility to "hidden" after 5 seconds. Simultaneously, set the height and width to zero to prevent space occupation in the DOM flow.

Example

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div>

This approach achieves the desired result using CSS transitions, hiding the element after a specified delay without affecting the flow of the page.

The above is the detailed content of Can you hide an element after 5 seconds using only CSS?. For more information, please follow other related articles on the PHP Chinese website!