css3定义动画@keyframes

启动动画

#demo {
    animation-name: animation1; //启用动画的名称
    animation-duration: 2s; //动画循环时间
    animation-timing-function: linear; //一直循环
}

定义动画

@keyframes animation1{
    0% {transform: translate(0); }
    20% {transform: translate(120px); }
    40% {transform: translate(240px); }
    60% {transform: translate(240px, 40px); }
    80% {transform: translate(240px, 80px); }
    100% {transform: translate(240px, 120px); }
}