变换动画答案

【问题标题】：Transform Animations变换动画
【发布时间】：2017-02-21 23:11:42
【问题描述】：

我刚刚发现了如何使用 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

【问题讨论】：

CSS3: reverse animation on mouse out after hover的可能重复
刚刚看了看，似乎解决方案虽然不错，但只完成了一半。如果鼠标离开对象，它似乎会取消缓出属性。

标签： css transform css-animations translate

【解决方案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/

【讨论】：