<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "Css/common.css"> <styletype= "Text/css">. Xiaoming{position:Absolute;Top:100px; Left:100px;Animation:name1 2s infinite; }@keyframes name1{0%{Top:200px; }10%{Top:800px; Left:800px;Transform:Rotate (180deg); }60%{Top:400px; Left:400px;Transform:Rotate (180deg); }100%{Top:100px; Left:100px; } } </style></Head><Body><Divclass= "Xiaoming"> <imgsrc= "Http://img30.360buyimg.com/jr_image/jfs/t3943/198/1201160477/17676/4e4ae11/586b5b09N6c946d97.jpg"alt=""></Div></Body></HTML>
Disc rotation Case//
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <styletype= "Text/css">. Xiaoming{position:Absolute;Top:100px; Left:100px;Animation:go 4s infinite linear;
/*infinite Unlimited, can also write a number of times */
/*linear Uniform */
}@keyframes Go{0%{Transform:Rotate (0deg); }100%{Transform:Rotate (360deg); } } </style></Head><Body> <Divclass= "Xiaoming"> <imgsrc= "Images/cd.png"alt=""> </Div></Body></HTML>
CSS Animated Notes