웹킷 키 프레임 호버 - 이전 애니메이션 방지

Question

애니메이션에 사용할 @ -webkit-keyframes 집합이있는 요소가 있습니다. 페이지로드시이 키 프레임이 실행되고 인트로가 멋지게 보입니다.

다음에는 호버에 @webkit-keyframes의 두 번째 세트가 있고 반복하도록 설정되어 있으므로 호버하면 해당 요소에 반복 애니메이션이 있습니다. 그것도 훌륭하게 작동합니다.

그러나 순간적으로 요소에서 마우스를 움직이면 첫 번째 (소개) 키 프레임 세트가 다시 실행됩니다. 처음 실행 한 후에 실행하고 싶지 않습니다. CSS에서이를 방지 할 수있는 쉬운 방법이 있습니까?

나는 또한

#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */ 
#e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */ 

을 가지고있는 최소한의 예를, 1500 + 평판 편집에 태그 누군가는 웹킷 - 애니메이션 태그를 추가 할 수 있습니까? 나는 아직 창조되지 않았다는 것을 믿을 수 없다 ... : \

Answer 1

당신이 필요로하는 것을 달성하는 순수한 CSS 방법이 없다. 당신은 부모 요소 또는 래퍼에 애니메이션을 추가하고 별도로 각 요소에 애니메이션을 적용 할 수 있습니다 :이

.wrapper { 
    -webkit-animation: fadeIn .5s ease-out 0 1; 
} 
#e { 
    width: 100px; 
    height: 100px; 
    background-color: #000; 
} 
#e:hover { 
    -webkit-animation: pulse 100ms ease-in-out 0s infinite alternate; 
} 
@-webkit-keyframes fadeIn { 
     0% { opacity: 0; } 
     100% { opacity: 0.5;} 
} 

@-webkit-keyframes pulse { 
     0% { background-color: #000; } 
     100% { background-color: #c00; } 
} 

http://jsfiddle.net/3PuT2/