html - 在rotateY之后改变css

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; 
}

小提琴