愚人节动画

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

@keyframes foolday1 {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 300px;
    }

    50% {
        left: 0px;
        top: 200px;
    }

    75% {
        left: 0px;
        top: 10px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-moz-keyframes foolday1 /* Firefox */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 300px;
    }

    50% {
        left: 0px;
        top: 200px;
    }

    75% {
        left: 0px;
        top: 10px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes foolday1 /* Safari 和 Chrome */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 300px;
    }

    50% {
        left: 0px;
        top: 200px;
    }

    75% {
        left: 0px;
        top: 10px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-o-keyframes foolday1 /* Opera */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 300px;
    }

    50% {
        left: 0px;
        top: 200px;
    }

    75% {
        left: 0px;
        top: 10px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes foolday2 {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 200px;
    }

    50% {
        left: 0px;
        top: 120px;
    }

    75% {
        left: 0px;
        top: 50px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-moz-keyframes foolday2 /* Firefox */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 200px;
    }

    50% {
        left: 0px;
        top: 120px;
    }

    75% {
        left: 0px;
        top: 50px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes foolday2 /* Safari 和 Chrome */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 200px;
    }

    50% {
        left: 0px;
        top: 120px;
    }

    75% {
        left: 0px;
        top: 50px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-o-keyframes foolday2 /* Opera */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 200px;
    }

    50% {
        left: 0px;
        top: 120px;
    }

    75% {
        left: 0px;
        top: 50px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes foolday3 {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 120px;
    }

    50% {
        left: 0px;
        top: 80px;
    }

    75% {
        left: 0px;
        top: 40px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-moz-keyframes foolday3 /* Firefox */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 120px;
    }

    50% {
        left: 0px;
        top: 80px;
    }

    75% {
        left: 0px;
        top: 40px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes foolday3 /* Safari 和 Chrome */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 120px;
    }

    50% {
        left: 0px;
        top: 80px;
    }

    75% {
        left: 0px;
        top: 40px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-o-keyframes foolday3 /* Opera */ {
    0% {
        left: 0px;
        top: 0px;
    }

    25% {
        left: 0px;
        top: 120px;
    }

    50% {
        left: 0px;
        top: 80px;
    }

    75% {
        left: 0px;
        top: 40px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

#foolday1 {
    position: relative;
    animation: foolday1 5s;
    -moz-animation: foolday1 5s;     /* Firefox */
    -webkit-animation: foolday1 5s;  /* Safari 和 Chrome */
    -o-animation: foolday1 5s;       /* Opera */
    animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;     /* Safari 和 Chrome */
    -o-animation-delay: 1s;
}

#foolday2 {
    position: relative;
    animation: foolday2 4s;
    -moz-animation: foolday2 4s;     /* Firefox */
    -webkit-animation: foolday2 4s;  /* Safari 和 Chrome */
    -o-animation: foolday2 4s;       /* Opera */
    animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;     /* Safari 和 Chrome */
    -o-animation-delay: 2s;
}

#foolday3 {
    position: relative;
    animation: foolday3 3s;
    -moz-animation: foolday3 3s;     /* Firefox */
    -webkit-animation: foolday3 3s;  /* Safari 和 Chrome */
    -o-animation: foolday3 3s;       /* Opera */
    animation-delay: 3s;
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;     /* Safari 和 Chrome */
    -o-animation-delay: 3s;
}

#foolday4 {
    position: relative;
    animation: foolday1 2s;
    -moz-animation: foolday1 2s;     /* Firefox */
    -webkit-animation: foolday1 2s;  /* Safari 和 Chrome */
    -o-animation: foolday1 2s;       /* Opera */
    animation-delay: 4s;
    -moz-animation-delay: 4s;
    -webkit-animation-delay: 4s;     /* Safari 和 Chrome */
    -o-animation-delay: 4s;
}