css solution to hide div after x amount of seconds

后端 未结 3 1892
伪装坚强ぢ
伪装坚强ぢ 2021-01-04 09:49

Any way using css3 only to remove/hide the #a after say 90 seconds of page load ?


      
      
3条回答
  • 2021-01-04 10:44

    Closest you can come with css only is this..it might be improved further but this as it's..

    http://jsfiddle.net/techsin/7g7ofazj/

    .red {
        background-color: red; width: 100px; height: 100px;
        -webkit-animation: ani 1s forwards;
    }
    
    @-webkit-keyframes ani {
        89%  {opacity:1;height: 100px;}
        90%  {opacity:0; height: 0;}
        100%  {opacity:0; height: 0;}
    }
    

    And if you wanted to do with javascript/jquery..

    you would do this..

    var ele = $(".hide_after_90_seconds");
    setTimeout(function() { ele.hide(); }, 9000);
    
    0 讨论(0)
  • 2021-01-04 10:45

    This is possible with CSS animation and the forwards property to pause the animation at 100%. The display property cannot be animated.

    The element is given position: relative and then opacity: 0 and left: -9999px when it reaches 100%. It will fade and then pull itself outside the viewport.

    See browser support here - Compatible IE 10+ !

    Here is a complete list of animated properties.

    Here are three ways to pull the div outside of the viewport at 100%:

    1. left: -9999px combined with position: relative on the element (Like in the example below)

    2. height: 0 or max-height: 0 combined with text-indent: -9999px

    3. This example with border-width from @Troy Gizzi

    Example

    This example fades the text after 5 seconds and then removes the div from the viewport.

    div {
      -webkit-animation: seconds 1.0s forwards;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-delay: 5s;
      animation: seconds 1.0s forwards;
      animation-iteration-count: 1;
      animation-delay: 5s;
      position: relative;
      background: red;
    }
    @-webkit-keyframes seconds {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        left: -9999px; 
      }
    }
    @keyframes seconds {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        left: -9999px; 
      }
    }
    <div>hide me after 5 seconds</div>

    0 讨论(0)
  • 2021-01-04 10:45

    #hidethis { animation: css 0s 3s forwards; }
    
    @keyframes css  { to { visibility: hidden; } }
                        /* visibility / overflow: hidden; */
    <div id='hidethis'>Wait for 3 seconds...</div>

    0 讨论(0)
提交回复
热议问题