Двухсторонняя анимация с @keyframes

Question

Я создавал пользовательскую фотогалерею и вдруг столкнулся с этой проблемой. Если вы создаете анимацию @keyframes, ее нельзя воспроизвести обратным образом.

Например: у вас есть анимация, которая увеличивает квадрат по шкале(). Если вы его наведете, квадрат плавно увеличится, но если вы вытащите мышь, ваш квадрат отскочит назад без анимации.

Есть ли способ отменить анимацию на обратном пути? В моем случае переходы не работают должным образом. Благодарю.

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