Question

当我的div悬停

时，我想在css rotateY之后改变我的背景颜色

@-webkit-keyframes spin {  
 0%{
    -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
 }  
 100%{
    -webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
 }  

}
.hex:hover{
  background:red;
   -webkit-animation-name: spin; 
   -webkit-animation-iteration-count: 1; 
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 1s; 
}

Answer 1

您应该在关键帧中定义，因为您的元素在悬停时动画，因此您可以更改动画关键帧本身的背景颜色。试试这个：

 @-webkit-keyframes spin {  
 0%{
    -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
 }  
 100%{
    -webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
       background:red;
 }  

}
.hex:hover{

   -webkit-animation-name: spin; 
   -webkit-animation-iteration-count: 1; 
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 1s; 
}
.hexHovered {
          background:red;
          }

要在悬停时保留背景颜色，您可以使用此javascript代码。

$(".hex").hover(
function () { $(this).addClass(".hexHovered")
});

Answer 2

您可以使用动画填充模式及时“动画”动画。假设您希望颜色持续存在，而不是旋转，那么它就会变得更加复杂;你需要两个动画才能只制作一个动画。

@-webkit-keyframes spin {  
 0% { -webkit-transform: rotateY(0deg);  }  
 100%{ -webkit-transform: rotateY(180deg);  }  
}
@-webkit-keyframes red {  
 0%   { background: white; }  
 100% { background: red; } 
}

.hex {
    -webkit-animation-fill-mode:  none, forwards;
   -webkit-animation-name: spin, red; 
   -webkit-animation-iteration-count: 0; 
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 1s, 0.1s; 
   -webkit-animation-delay: 0s 1s;         
    -webkit-transform-origin: 0% 0% 5;
}
.hex:hover{
   -webkit-animation-iteration-count: 1; 
}

rotateY后更改css

2 个答案:

fiddle