Question

I wanted to know if it’s possible with the “new” CSS3 (and its animations) to display elements one after the other (maybe with CSS3 animations or a mix of :nth-child and counter?)? I wanted to make some sort of countdown which displays after some seconds every time another element? With JavaScript that wouldn’t be a problem (and I know how to do it) but is it possible with CSS3 (with some of the -webkit-animation-* attributes maybe?)?

HTML is like that (but could be also changed it needed):

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

Answer 1

Hey, played a bit with webkit animation property and here is a little thingy I made that you might found usefull or it should at least give your an idea or two (note: positioning is not very acurate):

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