Question

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

例如：你有一个动画，它通过scale（）放大方形。如果你将鼠标悬停在方形上会平滑地放大，但是如果你将鼠标移开，你的方块会在没有动画的情况下反弹。

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

Answer 1

如果要放大和图像，则无需使用@keyframes制作动画。你只是在悬停在图像上时使图像缩放，并使用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" />

使用@keyframes进行双向动画

2 个答案: