[米随随] s5s5

最近研究CSS3的动画，还是相当的强大啊，做了一个小皮球跳跳的动画 DEMO，代码如下：

.animation {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 10;
  -webkit-animation-direction: alternate;
  -webkit-border-radius: 100px;
  position: relative;
  left: 0;
  top: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: #f00;
}
@-webkit-keyframes bounce {
  from {
    top: 0;
    -webkit-animation-timing-function: ease-out;
  }
  25% {
    top: 110px;
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    top: 50px;
    -webkit-animation-timing-function: ease-out;
  }
  75% {
    top: 90px;
    -webkit-animation-timing-function: ease-out;
  }
  to {
    top: 100px;
  }
}

参考文档： CSS Animation Safari CSS Reference CSS Animations Module Level 3 你需要知道的CSS3 动画技术 CSS3变换入门 CSS3 鼠标悬停动画

米随随 岁次庚寅二月十六酉时 书于深圳