Adding Delay to looping in CSS animation

Question

I have been trying (how make a looped animation wait using css3 and CSS Animation Delay in Between Loop ) to have some delay before my css animation restarting and yet to have any result.

I am new to CSS and hope you can suggest me some pointers.

The following is some CSS code (for my website, you may go to 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%;
    }
}

Where did you specify `animation-delay`? That's basic I guess. — Marcos Pérez Gude, Sep 19 '16 at 15:21
the "4s" is the delay. I see people using this shorthand animation property. is that not correct? — user1984132, Sep 20 '16 at 09:03
I don't like using that shorthand for delay since there are two similar values (I don't know how the browser distinguish between 3s and 4s in the same sentence). I like much more the shorthand without the delay and then add `animation-delay` with the prefixes. — Marcos Pérez Gude, Sep 20 '16 at 09:58

Yahya Essam · Answer 1 · 2016-09-20T12:21:27.250

try it as this syntax of animation

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%;
        }
    }

I modified as suggested. However, it is still not pausing after each iteration of effect. (you may visit iwaterhealth.com to have a look at the effect. What I want to achieve is to have the text animation pause for awhile before starting to appear again) — user1984132, Sep 20 '16 at 09:07
i tried modifying the css in chrome F12 with "animation: fly-in-out 8s infinite ease-in-out;" the effect is much like what I wanted. — user1984132, Sep 20 '16 at 09:29

Adding Delay to looping in CSS animation

1 Answers1