变换动画

Question

我刚刚发现了如何使用transform属性为元素设置动画（看起来很神奇！）。虽然我在缓出部分遇到了一些麻烦。当我将鼠标从元素上移开时，它会立即回落到原始状态 - 如果可能的话，我想在返回的路上应用相同的动画时间。

代码：

<div class="transform-box">
</div>

.transform-box:hover {
animation: raise 2s; }

@keyframes raise {
0% {
transform: translateY(0); }

100% {
transform: translateY(-150px); }
}

我这样做是对的吗？或者我是否应该使用不同的属性，如果我想要一个相同的动画时间在它的上升和它的方式回来？

编辑：这里有一个例子：https://www.lonelyplanet.com/france/paris - 滚动到第二部分，其中显示“巴黎的顶级体验 - 这是仅用CSS实现的，还是需要Javascript？

我查看了可能的重复问题，似乎答案只有一半 - 它可以将动画时间控制回原始状态，但是如果鼠标移离对象则会跳回。

谢谢，

Reskk

Answer 1

这可以在没有js的情况下实现。

.transform-box {
    float:left;
    transition: 2s ease-in-out;
}

.transform-box:hover {
    transform: translateY(-20px);
 }

<div class="transform-box">  
    <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-546212251_medium.jpg" width="300px">
</div> 

查看此页面。 http://www.the-art-of-web.com/css/css-animation/