Стоп-позиция на анимации css

Question

Я хотел бы на hover сохранить положение изображения элемента .pole-main .pole-gatherings .img:hover.

Заморозьте это с animation css эффектом

Когда hover отсутствует, я бы хотел оживить его обратно

Как предусмотрено в .pole-main .pole-gatherings .img:hover

https://jsfiddle.net/kb2grhL5/

Answer 1

изменить анимацию с ключевого кадра на переход:

  .pole-main .pole-gatherings .img{
    width: 283px;
    height: 102px;
    background-color: blue;
    transition: transform .7s;
    transform-origin: 0% 0%;
    transition-timing-function: ease-out;
  }
  .pole-main .pole-gatherings .img:hover{
    transform: perspective(300px) rotateY(-5deg);
  }