Question

There are four images , and each images has to be border effect(css) by using time delay sequentially. For example:

O O
O O

after 5seconds

O O
O O

after 5seconds

O O
O O

Does anyone know how to make it ?

Answer 1

If you must use CSS then, given the HTML below, this is possible (though a little clunky):

<div id="timer">
    <div class="interval"></div>
    <div class="interval"></div>
    <div class="interval"></div>
    <div class="interval"></div>
</div>​

And the CSS:

@-moz-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-ms-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-o-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@-webkit-keyframes loading {
    0%, 24% {
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

@keyframes loading {
    0%, 24% { /* stops the gradual fading-out */
        border-color: #f00;
    }
    25%, 100% {
        border-color: #000;
    }
}

#timer .interval {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
    -moz-animation: loading 20s linear infinite;
    -ms-animation: loading 20s linear infinite;
    -o-animation: loading 20s linear infinite;
    -webkit-animation: loading 20s linear infinite;
    animation: loading 20s linear infinite;
}

#timer .interval:nth-child(1) {
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    -o-animation-delay: 0;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#timer .interval:nth-child(2) {
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    -o-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

#timer .interval:nth-child(3) {
    -moz-animation-delay: 10s;
    -ms-animation-delay: 10s;
    -o-animation-delay: 10s;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

#timer .interval:nth-child(4) {
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    -o-animation-delay: 15s;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}
​

JS Fiddle demo.

Or, using CSS transitions but using JavaScript, in this case jQuery (for simplicity), to trigger the next step, rather than manually using, and setting, the animation-delay with CSS:

function transNext(currentEl, transitionClass) {
    if (!currentEl) {
        return false;
    }
    else {
        transitionClass = transitionClass || 'interval';
        var cur = $(currentEl),
            nxt = cur.next().length ? cur.next() : cur.prevAll(':last');
        cur.removeClass(transitionClass);
        nxt.addClass(transitionClass);

    }
}

$('#timer').on('mozAnimationEnd msAnimationEnd oAnimationEnd webkitAnimationEnd animationEnd', function(e) {
    transNext(e.target, 'interval');
});​

And the modified CSS:

@-moz-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-ms-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-o-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@-webkit-keyframes loading {
    0%, 99% {
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

@keyframes loading {
    0%, 99% { /* stops the gradual fading-out */
        border-color: #f00;
    }
    100% {
        border-color: #000;
    }
}

#timer div {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
}

#timer .interval {
    -moz-animation: loading 5s linear 1;
    -ms-animation: loading 5s linear 1;
    -o-animation: loading 5s linear 1;
    -webkit-animation: loading 5s linear 1;
    animation: loading 5s linear 1;
}
​    ​

JS Fiddle demo.