CSS3 애니메이션 출시 및 마우스 오버시?

Question

약간 문제가 있습니다. 사용자가 페이지를 방문 할 때와 요소 위에 놓을 때 (이미지 임) 다음 애니메이션이 실행되기를 원합니다. 지금은 페이지를 방문 할 때 발생하지만, .animated:hover은 무시됩니까? 어떤 충고?

.animated, .animated:hover { 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation: swing 4s; 
    -moz-animation: swing 4s; 
    -ms-animation: swing 4s; 
    -o-animation: swing 4s; 
    animation: swing 4s; 
} 

@-webkit-keyframes swing { 
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; } 
    0% { -webkit-transform: rotate(0deg); } 
    10% { -webkit-transform: rotate(15deg); } 
    20% { -webkit-transform: rotate(-10deg); } 
    30% { -webkit-transform: rotate(10deg); } 
    40% { -webkit-transform: rotate(-8deg); } 
    50% { -webkit-transform: rotate(8deg); }  
    60% { -webkit-transform: rotate(-5deg); } 
    70% { -webkit-transform: rotate(5deg); } 
    80% { -webkit-transform: rotate(-2deg); } 
    90% { -webkit-transform: rotate(2deg); }  
    100% { -webkit-transform: rotate(0deg); } 
} 

@-moz-keyframes swing { 
    0% { -moz-transform: rotate(0deg); } 
    10% { -moz-transform: rotate(15deg); } 
    20% { -moz-transform: rotate(-10deg); } 
    30% { -moz-transform: rotate(10deg); } 
    40% { -moz-transform: rotate(-8deg); } 
    50% { -moz-transform: rotate(8deg); } 
    60% { -moz-transform: rotate(-5deg); } 
    70% { -moz-transform: rotate(5deg); } 
    80% { -moz-transform: rotate(-2deg); } 
    90% { -moz-transform: rotate(2deg); } 
    100% { -moz-transform: rotate(0deg); } 
} 

@-o-keyframes swing { 
    0% { -o-transform: rotate(0deg); } 
    10% { -o-transform: rotate(15deg); } 
    20% { -o-transform: rotate(-10deg); } 
    30% { -o-transform: rotate(10deg); }  
    40% { -o-transform: rotate(-8deg); }  
    50% { -o-transform: rotate(8deg); } 
    60% { -o-transform: rotate(-5deg); } 
    70% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-2deg); }  
    90% { -o-transform: rotate(2deg); } 
    100% { -o-transform: rotate(0deg); } 
} 

@keyframes swing { 
    0% { transform: rotate(0deg); } 
    10% { transform: rotate(15deg); } 
    20% { transform: rotate(-10deg); } 
    30% { transform: rotate(10deg); } 
    40% { transform: rotate(-8deg); } 
    50% { transform: rotate(8deg); }  
    60% { transform: rotate(-5deg); } 
    70% { transform: rotate(5deg); } 
    80% { transform: rotate(-2deg); } 
    90% { transform: rotate(2deg); }  
    100% { transform: rotate(0deg); } 
} 

.swing { 
    -webkit-transform-origin: bottom center; 
    -moz-transform-origin: bottom center; 
    -o-transform-origin: bottom center; 
    transform-origin: bottom center; 
    -webkit-animation-name: swing; 
    -moz-animation-name: swing; 
    -o-animation-name: swing; 
    animation-name: swing; 
} 

Answer 1

니스 애니메이션, 호버가 그 원래의 CSS 클래스의 변화를 찾고으로 상쇄되고, 당신은 애니메이션 기능에 대한 호버의를 선언함으로써이 문제를 해결할 수 있습니다.

/*PAGE LOAD ANIMATION*/ 
    .animated{ 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation: swing 4s; 
    -moz-animation: swing 4s; 
    -ms-animation: swing 4s; 
    -o-animation: swing 4s; 
    animation: swing 4s; 
} 

@-webkit-keyframes swing { 
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; } 
    0% { -webkit-transform: rotate(0deg); } 
    10% { -webkit-transform: rotate(15deg); } 
    20% { -webkit-transform: rotate(-10deg); } 
    30% { -webkit-transform: rotate(10deg); } 
    40% { -webkit-transform: rotate(-8deg); } 
    50% { -webkit-transform: rotate(8deg); }  
    60% { -webkit-transform: rotate(-5deg); } 
    70% { -webkit-transform: rotate(5deg); } 
    80% { -webkit-transform: rotate(-2deg); } 
    90% { -webkit-transform: rotate(2deg); }  
    100% { -webkit-transform: rotate(0deg); } 
} 

@-moz-keyframes swing { 
    0% { -moz-transform: rotate(0deg); } 
    10% { -moz-transform: rotate(15deg); } 
    20% { -moz-transform: rotate(-10deg); } 
    30% { -moz-transform: rotate(10deg); } 
    40% { -moz-transform: rotate(-8deg); } 
    50% { -moz-transform: rotate(8deg); } 
    60% { -moz-transform: rotate(-5deg); } 
    70% { -moz-transform: rotate(5deg); } 
    80% { -moz-transform: rotate(-2deg); } 
    90% { -moz-transform: rotate(2deg); } 
    100% { -moz-transform: rotate(0deg); } 
} 

@-o-keyframes swing { 
    0% { -o-transform: rotate(0deg); } 
    10% { -o-transform: rotate(15deg); } 
    20% { -o-transform: rotate(-10deg); } 
    30% { -o-transform: rotate(10deg); }  
    40% { -o-transform: rotate(-8deg); }  
    50% { -o-transform: rotate(8deg); } 
    60% { -o-transform: rotate(-5deg); } 
    70% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-2deg); }  
    90% { -o-transform: rotate(2deg); } 
    100% { -o-transform: rotate(0deg); } 
} 

@keyframes swing { 
    0% { transform: rotate(0deg); } 
    10% { transform: rotate(15deg); } 
    20% { transform: rotate(-10deg); } 
    30% { transform: rotate(10deg); } 
    40% { transform: rotate(-8deg); } 
    50% { transform: rotate(8deg); }  
    60% { transform: rotate(-5deg); } 
    70% { transform: rotate(5deg); } 
    80% { transform: rotate(-2deg); } 
    90% { transform: rotate(2deg); }  
    100% { transform: rotate(0deg); } 
} 

.swing { 
    -webkit-transform-origin: bottom center; 
    -moz-transform-origin: bottom center; 
    -o-transform-origin: bottom center; 
    transform-origin: bottom center; 
    -webkit-animation-name: swing; 
    -moz-animation-name: swing; 
    -o-animation-name: swing; 
    animation-name: swing; 
} 
/*HOVER ANIMIATION*/ 
.animated:hover{ 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation: swingHover 4s; 
    -moz-animation: swingHover 4s; 
    -ms-animation: swingHover 4s; 
    -o-animation: swingHover 4s; 
    animation: swingHover 4s; 
} 

@-webkit-keyframes swingHover { 
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; } 
    0% { -webkit-transform: rotate(0deg); } 
    10% { -webkit-transform: rotate(15deg); } 
    20% { -webkit-transform: rotate(-10deg); } 
    30% { -webkit-transform: rotate(10deg); } 
    40% { -webkit-transform: rotate(-8deg); } 
    50% { -webkit-transform: rotate(8deg); }  
    60% { -webkit-transform: rotate(-5deg); } 
    70% { -webkit-transform: rotate(5deg); } 
    80% { -webkit-transform: rotate(-2deg); } 
    90% { -webkit-transform: rotate(2deg); }  
    100% { -webkit-transform: rotate(0deg); } 
} 

@-moz-keyframes swingHover { 
    0% { -moz-transform: rotate(0deg); } 
    10% { -moz-transform: rotate(15deg); } 
    20% { -moz-transform: rotate(-10deg); } 
    30% { -moz-transform: rotate(10deg); } 
    40% { -moz-transform: rotate(-8deg); } 
    50% { -moz-transform: rotate(8deg); } 
    60% { -moz-transform: rotate(-5deg); } 
    70% { -moz-transform: rotate(5deg); } 
    80% { -moz-transform: rotate(-2deg); } 
    90% { -moz-transform: rotate(2deg); } 
    100% { -moz-transform: rotate(0deg); } 
} 

@-o-keyframes swingHover { 
    0% { -o-transform: rotate(0deg); } 
    10% { -o-transform: rotate(15deg); } 
    20% { -o-transform: rotate(-10deg); } 
    30% { -o-transform: rotate(10deg); }  
    40% { -o-transform: rotate(-8deg); }  
    50% { -o-transform: rotate(8deg); } 
    60% { -o-transform: rotate(-5deg); } 
    70% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-2deg); }  
    90% { -o-transform: rotate(2deg); } 
    100% { -o-transform: rotate(0deg); } 
} 

@keyframes swingHover { 
    0% { transform: rotate(0deg); } 
    10% { transform: rotate(15deg); } 
    20% { transform: rotate(-10deg); } 
    30% { transform: rotate(10deg); } 
    40% { transform: rotate(-8deg); } 
    50% { transform: rotate(8deg); }  
    60% { transform: rotate(-5deg); } 
    70% { transform: rotate(5deg); } 
    80% { transform: rotate(-2deg); } 
    90% { transform: rotate(2deg); }  
    100% { transform: rotate(0deg); } 
} 

.swingHover { 
    -webkit-transform-origin: bottom center; 
    -moz-transform-origin: bottom center; 
    -o-transform-origin: bottom center; 
    transform-origin: bottom center; 
    -webkit-animation-name: swingHover; 
    -moz-animation-name: swingHover; 
    -o-animation-name: swingHover; 
    animation-name: swingHover; 
}