自動時間延遲css橫幅

Question

有四個圖像，每個圖像必須通過使用時間延遲順序邊界效果（CSS）。例如：

öö ○○

5秒後

öö ○○5秒後

○○ öö

有誰知道如何製作它？

Answer 1

如果必須使用CSS然後，給出下面的HTML，這是可能的（雖然有點麻煩）：

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

而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。

或者，使用CSS過渡但使用JavaScript，在這種情況下的jQuery（爲簡單起見），到觸發下一個步驟，而不是手動使用，和設置，animation-delay與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'); 
});​ 

而修改後的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。

Answer 2

可以使用''setInterval'' JavaScript函數。看一下this JSFiddle here的例子，它可以工作。

HTML：

<div class="container"> 
    <div class="marker"></div> 
    <div class="marker"></div> 
    <div class="marker"></div> 
    <div class="marker"></div> 
</div> 

CSS：

.marker { 
    background: #999; 
    float: left; 
    width: 20px; 
    height: 20px; 
    margin: 0 5px 0 0; 
} 

.marked { 
    border: 2px solid red; 
} 

的JavaScript：

jQuery(function() { 
    // Set border around first element 
    jQuery('.container .marker:first').addClass('marked'); 

    // Start interval with 5 second steps 
    var iv = setInterval(function() { 
     // Executes every 5 seconds 

     // Is there a next element? 
     if (jQuery('.marker.marked').next('.marker').length == 1) { 
      jQuery('.marker.marked') // actual marked element 
       .removeClass('marked') // remove border 
       .next('.marker')  // go to next element 
       .addClass('marked'); // add border 
     } else { 
      // No next element? Start again with first element 
      jQuery('.marker.marked').removeClass('marked'); 
      jQuery('.container .marker:first').addClass('marked'); 
     } 
    }, 5000); 
});​ 

從您的問題中不清楚您是否想從左到右進行一次運行，或者是否必須在序列中最後一張圖像之後的左側重新開始運行。我的例子在最後一個div後停止。你將不得不用你的圖像元素來替換DIV元素。他們只需要具有該類的「標記」屬性。

編輯：上面更新的小提琴/代碼循環遍歷元素，並重復第一個元素。