使用@keyframes 的双向动画答案

【问题标题】：Two-way Animation with @keyframes使用@keyframes 的双向动画
【发布时间】：2016-10-17 11:51:49
【问题描述】：

我正在创建一个自定义照片库，突然遇到了这个问题。如果您创建 @keyframes 动画，则无法反向播放。

例如：你有一个动画，它通过 scale() 放大了正方形。如果你将它悬停，方块会平滑放大，但如果你将鼠标移出，你的方块会弹回而没有动画。

有没有办法在后面的路线上反转动画？在我的情况下，转换无法正常工作。谢谢。

【问题讨论】：

【解决方案1】：

如果你想放大和图像，你不需要使用@keyframes制作动画。您只需在将鼠标悬停在图像上时使其缩放，并使用 CSS 过渡使其缓慢缩放，例如：

   img:hover {
       transform: scale(2);
   }

   img {
       transition: all 1s;
   }

【讨论】：

Square 就是一个例子。我有更复杂的情况。而且，正如我所说，我不需要过渡。
我真的不知道你到底面临什么情况。但是，有一个名为 animation-direction 的 CSS 属性，它可以接受 reverse 作为值。希望对您有所帮助。

【解决方案2】：

 .image{
        margin:400px;
        padding-top:5px;
        overflow:hidden;
        transition-duration:0.9s;
        transition-property:transform;
        }
.image:hover{
       transform:scale(2.5);
    }

<img class="image" src="download.jpg" alt="a" />

【讨论】：