CSS 背景缩放动画在鼠标移出时跳转

Question

我添加了一个关键帧动画来缓慢放大背景图像，效果很好，但是当我将鼠标移出时，动画会跳回原始状态而不是缩小。

#startup.hover:before {
opacity:1;

-webkit-animation: animatedBackground 5s ease-in-out 1;
-moz-animation: animatedBackground 5s ease-in-out 1;
animation: animatedBackground 5s ease-in-out 1;

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes animatedBackground {

0% {
-webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
     -o-transform: scale(1, 1);
        transform: scale(1, 1);
 }

 100% {
 -webkit-transform: scale(1.1, 1.1);
   -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
     -o-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
  }
}

我是不是漏掉了什么？

Answer 1

首先，.hover 是您要添加的类还是您打算使用 :hover？只是指出这一点。假设这是一个类，您应该在 id 上添加过渡动画。

#startup:before {
  -webkit-transition: all 5s ease-in-out;
  -moz-transition: all 5s ease-in-out;
  -o-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;  
}

..这就是为什么当你悬停时它会坏掉的原因。没有类就没有过渡动画!