我是360的 ?

@-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:around;

? -webkit-animation-duration: 10s;

? -webkit-animation-timing-function: ease;

? -webkit-animation-delay: 1s;

? -webkit-animation-iteration-count:infinite;

}

是這樣的哦

@keyframes?around{
??0%?{
????transform:?translateX(0);
??}
??25%{
????transform:?translateX(180px);
??}
??50%{
?????transform:?translate(180px,?180px);?
??}
??75%{
????transform:translate(0,180px);
??}
??100%{
????transform:?translateY(0);
??}
}
@-webkit-keyframes?around{
??0%?{
????transform:?translateX(0);
??}
??25%{
????transform:?translateX(180px);
??}
??50%{
?????transform:?translate(180px,?180px);?
??}
??75%{
????transform:translate(0,180px);
??}
??100%{
????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:around;
??-webkit-animation-duration:?10s;
??-webkit-animation-timing-function:?ease;
??-webkit-animation-delay:?1s;
??-webkit-animation-iteration-count:infinite;
??animation:around;
??animation-duration:?10s;
??animation-timing-function:?ease;
??animation-delay:?1s;
??animation-iteration-count:infinite;
}