Can CSS Transitions or Animations Auto Hide Elements After 5 Seconds?

CSS Auto Hide Elements After 5 Seconds

The question arises: is it feasible to conceal an element five seconds after the page loads? A jQuery solution is known, but the intention is to replicate it using CSS transition. Is it possible, or is it beyond the capabilities of CSS transition/animation?

The Answer

The answer is a resounding yes! However, it cannot be accomplished in the expected manner because animating or transitioning the properties typically used to conceal an element (such as display or altering dimensions and setting to overflow: hidden) is not possible.

Instead, an animation is created for the relevant elements. After five seconds, visibility: hidden; is toggled, while height and width are set to zero to prevent the element from occupying space in the DOM flow.

Example Code

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>

The above is the detailed content of Can CSS Transitions or Animations Auto Hide Elements After 5 Seconds?. For more information, please follow other related articles on the PHP Chinese website!