Question

我一直在尝试（how make a looped animation wait using css3和CSS Animation Delay in Between Loop）在我的css动画重新启动之前有一些延迟，但却没有任何结果。

我是CSS新手，希望你能给我一些建议。

以下是一些CSS代码（对于我的网站，您可以转到http://iwaterhealth.com/）

i {
    font-style: normal;
    padding: 0 0.25em;
    -webkit-transform: scale(0) translate3d(0, -2000px, 0);
       -moz-transform: scale(0) translate3d(0, -2000px, 0);
        -ms-transform: scale(0) translate3d(0, -2000px, 0);
         -o-transform: scale(0) translate3d(0, -2000px, 0);
            transform: scale(0) translate3d(0, -2000px, 0);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}
i.fly-in-out {
    -webkit-animation: fly-in-out 3s infinite ease-in-out 4s;
       -moz-animation: fly-in-out 3s infinite ease-in-out 4s;
         -o-animation: fly-in-out 3s infinite ease-in-out 4s;
            animation: fly-in-out 3s infinite ease-in-out 4s;
}


@keyframes fly-in-out {
    0% {
        transform: scale(0) translate3d(0, -2000px, 0);
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
        border-radius: 50%;
    }
    15%, 85% {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        transform: scale(1) translate3d(0, 0, 0);
        background: transparent;
        box-shadow: none;
    }
    100% {
        color: transparent; 
        transform: scale(0) translate3d(0, 2000px, 0);
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
        border-radius: 50%;
    }
}

Answer 1

尝试将其作为动画的语法

i {
        font-style: normal;
        padding: 0 0.25em;
        -webkit-transform: scale(0) translate3d(0, -2000px, 0);
           -moz-transform: scale(0) translate3d(0, -2000px, 0);
            -ms-transform: scale(0) translate3d(0, -2000px, 0);
             -o-transform: scale(0) translate3d(0, -2000px, 0);
                transform: scale(0) translate3d(0, -2000px, 0);
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
    }
    i.fly-in-out {
        -webkit-animation: fly-in-out 3s ease-in-out 8s infinite;
           -moz-animation: fly-in-out 3s ease-in-out 8s infinite;
             -o-animation: fly-in-out 3s ease-in-out 8s infinite;
                animation: fly-in-out 3s ease-in-out 8s infinite;
    }


    @keyframes fly-in-out {
        0% {
            transform: scale(0) translate3d(0, -2000px, 0);
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }
        15%, 85% {
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            transform: scale(1) translate3d(0, 0, 0);
            background: transparent;
            box-shadow: none;
        }
        100% {
            color: transparent; 
            transform: scale(0) translate3d(0, 2000px, 0);
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }
    }

添加延迟以在CSS动画中循环

1 个答案: