css3 keyframes hover animation firefox

Question

Я создал анимацию ключевых кадров для анимации div на мыши наведите курсор в чистом css3.

Он отлично работает во всех браузерах (google chrome, safari, IE, opera), исполняемых в FIREFOX!

Я действительно не знаю, почему это не работает только в firefox. Анимация не будет работает при наведении курсора мыши, но работает под нагрузкой ....

Вот 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; 
} 

И скрипка: http://jsfiddle.net/ktxDp/1/

Answer 1

Может быть Firefox не позволяет одна и та же анимация дважды.

Это сработало, когда я назвал анимацию только один раз. 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; 
}