CSS (3): как отображать элементы друг за другом

Question

Я хотел знать, возможно ли с «новым» CSS3 (и его анимацией) отображать элементы один за другим (может быть, с анимацией CSS3 или смесью: nth-child и counter ?)?Я хотел сделать какой-то обратный отсчет, который будет отображаться через несколько секунд каждый раз, когда другой элемент?С JavaScript это не будет проблемой (и я знаю, как это сделать), но возможно ли это с помощью CSS3 (возможно, с некоторыми атрибутами -webkit-animation-*?)?

HTML такой (но можеттакже нужно поменять надо):

<div id="count-it">
    <p>10</p>
    <p>9</p>
</div>

Answer 1

Эй, немного поиграл со свойством анимации webkit, и вот кое-что из того, что я сделал, чтобы вы могли найти что-то полезное, или это должно как минимум дать вам идею или две (примечание: позиционирование не очень точное):

HTML

  <div class="wrapper"><span>5<br />4<br />3<br />2<br />1</span></div>

CSS

  @-webkit-keyframes clock {
       0% {  top: 0; }
       20% {  top: -60; }
       40% {  top: -110;}
       60% { top: -170; }
       80% {  top: -230; }
       100% { top: -290;}
  }

  .wrapper span:hover {
      -webkit-animation-name: clock;
      -webkit-animation-duration: 5s;
      -webkit-transform-origin:50% 50%;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease;
  }
  .wrapper {
      display:block;
      overflow: hidden;
      background-color: #fff;
      height: 50px;
      width: 25px;
      border: 1px solid #000;
      position: relative;

  }

  .wrapper span {
      font-size: 45px;
      position: absolute;
      top: 0;
  }