启动和悬停时的 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;
}