发布和悬停时的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;
}