个回答

• dayscounting

  2014-12-19 16:18:29

  @-webkit-keyframes around{
    0% {
      -webkit-transform: translateX(0);
    }
    25%{
      -webkit-transform: translateX(180px);
    }
    50%{
       -webkit-transform: translate(180px, 180px); 
    }
    75%{
      -webkit-transform:translate(0,180px);
    }
    100%{
      -webkit-transform: translateY(0);
    }
  }
  div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 20px auto;
  }
  div span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: orange;
    border-radius: 100%;
    -webkit-animation-name:around;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count:infinite;
  }

  我是chrome  就以chrome为例了

  CSS3 需要根据不同浏览器来使用不同前缀 达到兼容效果

  0