CSSでアニメーションをランダム化することは可能ですか？

Question

次のアニメーションは3つの異なる要素で実行されます。

どのように異なる時間に発生するようにアニメーションをランダム化できますか？

@keyframes shine{ 
    10% { 
    opacity: 1; 
    top: -30%; 
    left: -30%; 
    transition-property: left, top, opacity; 
    transition-duration: 0.7s, 0.7s, 0.15s; 
    transition-timing-function: ease; 
    } 
    100% { 
    opacity: 0; 
    top: -30%; 
    left: -30%; 
    transition-property: left, top, opacity; 
    } 
} 

http://jsfiddle.net/nqQc7/1186/

また、アニメーションの間に遅延があるように見えます。トランジション自体のスピードを上げることなく、アニメーション間の時間をどのように高速化できますか？

私はもっと多くのキーフレームを追加しようとしましたが、アニメーション間の時間が増えないようです。

Answer 1

あなたは以下のように各ボタンに異なるアニメーション遅延やアニメーション-期間の値を使用できます。

/** 
 
* Icon 
 
*/ 
 

 
.icon { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    
 
    margin: 25px 0 25px 25px; 
 
    border-radius: 5px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-size: 12px; 
 
    font-family: sans-serif; 
 
} 
 

 
.icon:nth-child(1) { background: cornflowerblue; } 
 
.icon:nth-child(2) { background: salmon; } 
 
.icon:nth-child(3) { background: gray; } 
 

 
/** 
 
* The "shine" element 
 
*/ 
 

 
.icon:after { 
 
    
 
    animation: shine 1s ease-in-out alternate infinite; 
 
    animation-fill-mode: forwards; 
 
    content: ""; 
 
    position: absolute; 
 
    top: -110%; 
 
    left: -210%; 
 
    width: 200%; 
 
    height: 200%; 
 
    transform: rotate(30deg); 
 
    
 
    background: rgba(255, 255, 255, 0.13); 
 
    background: linear-gradient(
 
    to right, 
 
    rgba(255, 255, 255, 0.13) 0%, 
 
    rgba(255, 255, 255, 0.13) 77%, 
 
    rgba(255, 255, 255, 0.5) 92%, 
 
    rgba(255, 255, 255, 0.0) 100% 
 
); 
 
} 
 

 
.icon:nth-child(1):after { animation-delay: .1s; } 
 
.icon:nth-child(2):after { animation-delay: .3s; } 
 
.icon:nth-child(3):after { animation-delay: .5s; } 
 

 
/* Hover state - trigger effect */ 
 

 

 
/* Active state */ 
 

 

 

 
@keyframes shine{ 
 
    60% { 
 
    top: -30%; 
 
    left: -30%; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    top: -30%; 
 
    left: -30%; 
 
    } 
 
}

<a href="#" class="icon">let</a> 
 
<a href="#" class="icon">it</a> 
 
<a href="#" class="icon">shine</a> 
 

 
<!-- 
 
Forked by: 
 
Nicolas Gallagher - http://jsfiddle.net/KbNq7/ 
 
Chris Coyier - http://jsfiddle.net/chriscoyier/hk6z9/1/ 
 
-->