@keyframes的双向动画

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