欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3定义动画@keyframes

程序员文章站 2024-03-24 20:51:34
...

启动动画

#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); }
}