CSS에서 애니메이션을 무작위로 추출 할 수 있습니까?

Question

다음 애니메이션은 세 가지 요소를 통해 실행됩니다.

어떻게 애니메이션을 다른 시간에 발생 시키도록 무작위로 추출 할 수 있습니까?

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

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

또한 애니메이션 사이에 지연이있을 나타난다. 전환 자체의 속도를 높이 지 않고도 애니메이션 간의 재생 시간을 어떻게 단축 할 수 있습니까?

더 많은 키 프레임을 추가하려했지만 애니메이션 사이의 시간이 길어 보이지 않습니다.

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/ 
 
-->