css3 키 프레임 호버 애니메이션 파이어 폭

Question

순수 css3에서 마우스를 움직일 때 div로 애니메이션을 적용하기 위해 일부 키 프레임 애니메이션을 만들었습니다.

FIREFOX에서 실행되는 모든 브라우저 (google chrome, safari, IE, opera)에서 훌륭하게 작동합니다!

나는 파이어 폭스에서만 작동하지 않는 이유를 정말로 모른다. 여기에 마우스 커서를 가져다 대면 작동하지만 부하에서 작동하지 않습니다 애니메이션 ....

CSS를 키 프레임의 예 :

@-webkit-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
    20% { -webkit-transform: rotate(15deg); } 
    40% { -webkit-transform: rotate(-10deg); } 
    60% { -webkit-transform: rotate(5deg); }  
    80% { -webkit-transform: rotate(-5deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 
@-moz-keyframes swing { 
    20% { -moz-transform: rotate(15deg); } 
    40% { -moz-transform: rotate(-10deg); } 
    60% { -moz-transform: rotate(5deg); } 
    80% { -moz-transform: rotate(-5deg); } 
    100% { -moz-transform: rotate(0deg); } 
} 
@-o-keyframes swing { 
    20% { -o-transform: rotate(15deg); }  
    40% { -o-transform: rotate(-10deg); } 
    60% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-5deg); }  
    100% { -o-transform: rotate(0deg); } 
} 
@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); }  
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
} 
.col:hover .swing { 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation: swing 1s linear; 
    -moz-animation: swing 1s linear; 
    -o-animation: swing 1s linear; 
    animation: swing 1s linear; 
} 
.swing { 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation: swing 1s linear 1s; 
    -moz-animation: swing 1s linear 1s; 
    -o-animation: swing 1s linear 1s; 
    animation: swing 1s linear 1s; 
} 

.col, 
.th-icon { 
    position: relative; 
    margin: 40px 0 0 100px; 
    width: 200px; 
    height: 200px; 
} 
i.swing { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background: grey; 
} 

그리고 바이올린 : 파이어 폭스는 허용하지 않습니다

Answer 1

http://jsfiddle.net/ktxDp/1/이 될 수 있습니다 같은 애니메이션을 두 번.

애니메이션을 한 번만 호출했을 때 작동했습니다. 답변에 대한 Working Demo

.col:hover .swing { 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -o-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation: swing 1s linear; 
    -moz-animation: swing 1s linear; 
    -o-animation: swing 1s linear; 
    animation: swing 1s linear; 
}