@-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 需要根據(jù)不同瀏覽器來(lái)使用不同前綴 達(dá)到兼容效果