CSS Animation Properties--small ball movement

The subject has only one div

< Body >    < Div ></ Div > </ Body >

Style section (test: The current browser still needs to be prefixed to be compatible)

<style>    * {margin:0;padding:0;    }Div{position:Absolute;Top:0; Left:0;width:100px;Height:100px;Border-radius:50px;Border:2px solid Red;background:-webkit-radial-gradient (80px 80px, Circle, #fff, #00f);background:-ms-radial-gradient (80px 80px, Circle, #fff, #00f);        /*Animated name*/Animation-name:Move;        /*Animation Time*/animation-duration:3s;        /*Types of animations*/animation-timing-function:Linear;        /*number of animation plays*/Animation-iteration-count:Infinite;        /*whether the animation allows reverse*/animation-direction:Normal;        /*abbreviated to animation:move 2s linear 0s infinite normal;*/    }@-webkit-keyframes Move{0% { left:0px;Top:0px;        }25%{ Left:150px;Top:150px;        }50%{ Left:300px;Top:300px;        }75%{ Left:450px;Top:450px;        }100%{ Left:600px;Top:600px;        }} @-ms-keyframes Move{0% { left:0px;Top:0px;        }25%{ Left:150px;Top:150px;        }50%{ Left:300px;Top:300px;        }75%{ Left:450px;Top:450px;        }100%{ Left:600px;Top:600px;        }    }    </style>

If there are deficiencies, please ask for advice, sincere study.

CSS Animation Properties--small ball movement