решение css для скрытия div через x секунд

любой способ использовать css3 только для удаления / скрытия #a после, скажем, 90 секунд загрузки страницы ?

<div id="container">
  <div class="box">
    <a id="hide_after_90_seconds"></a>
  </div>
</div>

Я хотел бы перейти от дисплея: блок для отображения: нет, если это возможно ?

9
css css3

3 ответов

это возможно с анимацией CSS и forwards свойство для приостановки анимации на 100%. The display свойство не может быть анимировано.

элемент задается position: relative а то opacity: 0 и left: -9999px когда он достигает 100%. Он исчезнет, а затем вытянется за пределы иллюминатора.

см. поддержку браузера здесь - совместимый IE 10+ !

вот полный список анимированных свойств.

здесь есть три способа вытащить div за пределы окна просмотра на 100%:

  1. left: -9999px в сочетании с position: relative на элементе (как в примере ниже)

  2. height: 0 или max-height: 0 в сочетании с text-indent: -9999px

  3. этот пример с шириной границы С @Troy Gizzi

пример

в этом примере текст исчезает через 5 секунд, а затем удаляет div из окна просмотра.

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>
17

#hidethis { animation: css 0s 3s forwards; }

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

ближе всего вы можете прийти с css только это..это может быть улучшено дальше, но это как есть..

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;}
}

и если вы хотите сделать с javascript / jquery..

вы бы сделали это..

var ele = $(".hide_after_90_seconds");
setTimeout(function() { ele.hide(); }, 9000);
1