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你要添加的课程或者你想要使用的课程：悬停？只是指出这一点。假设这是一个类，您应该在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;  
}

..这就是为什么当你徘徊时它会破裂的原因。没有班级，没有过渡动画！

Answer 2

你不需要这样的高级工具作为关键帧来实现这一效果。

转换很容易实现，这是一个例子。 https://jsfiddle.net/vqL3stjz/

.animable{
    width: 100px;
    height: 100px;
    background-color: #000;
    transition: all 500ms;
}

.animable:hover{
  transform: scale(1.3, 1.3);
  transition: all 500ms;
}

如果你需要用关键帧制作它，那么我建议只将反向动画应用于未发现的元素。但是，您需要使用一些javascript，以防止在加载后立即在元素上运行动画等副作用。

TL; DR更好地使用tranistions，除非你真的需要使用关键帧。

CSS背景缩放动画跳出鼠标

2 个答案: