CSS(3) : How to display elements after each other

Question

我想知道是否可以使用"new"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;
  }