Question

我的css如下：

#icon01{
-webkit-animation: moveone 2.5s ease-in-out 1.7s infinite alternate;
-moz-animation:    moveone 2.5s ease-in-out 1.7s infinite alternate;
-o-animation:      moveone 2.5s ease-in-out 1.7s infinite alternate;
animation:         moveone 2.5s ease-in-out 1.7s infinite alternate; 
-ms-animation:     moveone 2.5s ease-in-out 1.7s infinite alternate;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;}

    #icon01:hover{
     -webkit-animation-play-state: running;
     -moz-animation-play-state: running;
     -o-animation-play-state: running;
     -ms-animation-play-state: running;
     animation-play-state: running;}

抱歉，我忘了发布关键帧部分。

@keyframes moveone{
from {transform: none;}
to {transform: rotateX(180deg) rotateY(-15deg) rotateZ(0deg) perspective(0px) translateZ(10px);}}

@-webkit-keyframes moveone{
from {-webkit-transform: none;}
to {-webkit-transform: rotateX(180deg) rotateY(30deg) rotateZ(0deg) perspective(0px) translateZ(10px);}}

@-moz-keyframes moveone{
from {-moz-transform: none;}
to {-moz-transform: rotateX(-180deg) rotateY(-15deg) rotateZ(0deg) perspective(0px) translateZ(10px);}}

@-o-keyframes moveone{
from {-o-transform: none;}
to {-o-transform: rotateX(180deg) rotateY(-15deg) rotateZ(0deg) perspective(0px) translateZ(10px);}}

@-ms-keyframes moveone{
from {-ms-transform: none;}
to {-ms-transform: rotateX(180deg) rotateY(-15deg) rotateZ(0deg) perspective(0px) translateZ(10px);}}

不知怎的，这对悬停不起作用。我也尝试在父div上使用悬停状态，也不会工作： - （

-webkit-animation-play-state不支持悬停

0 个答案: