使用@keyframe实现双向动画

Question

我正在创建一个自定义的图片库，突然遇到了这个问题。如果你创建了一个@keyframe动画，它不能以相反的方式播放。

例如:您有一个动画，它通过scale()放大正方形。如果将鼠标悬停在屏幕上，正方形将平滑放大，但如果将鼠标移出，正方形将在没有动画的情况下反弹回来。

有没有办法在后面的路线上反转动画？在我的例子中，转换不能正常工作。谢谢。

Answer 1

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

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

   img {
       transition: all 1s;
   }

Answer 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" />