0

我有一个小问题。我希望当用户访问页面并且将鼠标悬停在元素（它是图像）上时触发以下动画。现在它只是在访问页面时触发，但.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;
}
4

1 回答 1

0

不错的动画，悬停正在被取消，因为它正在寻找原始 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;
}
于 2013-10-05T13:52:46.223 回答