CSS3 animation

by Wang Peng

HTML

<div class="box"></div>

CSS

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: 2s  run infinite ease-in-out  alternate;
    animation: 2s  run infinite ease-in-out  alternate;
}

@keyframes run {
     0% {
        transform: rotate(0);
        top: 0;
        left: 0;
    }
     50% {
        transform: rotate(180deg);
        top: 0;
        left: 200px;
        background: yellow;
    }
     100% {
        transform: rotate(360deg);
        top: 0;
        left: 500px;
        border-radius: 50%;
        background: red;
    }
 }
@-webkit-keyframes run {
     0% {
        transform: rotate(0);
        top: 0;
        left: 0;
    }
     50% {
        transform: rotate(180deg);
        top: 0;
        left: 200px;
        background: yellow;
    }
     100% {
        transform: rotate(360deg);
        top: 0;
        left: 500px;
        border-radius: 50%;
        background: red;
    }
 }