css - 冻结动画css上的状态位置

Question

我想hover保存.pole-main .pole-gatherings .img:hover元素的图像位置。

animation用css效果冻结它

什么时候hover出去我想把它动画回来

如提供的.pole-main .pole-gatherings .img:hover

https://jsfiddle.net/kb2grhL5/

标签： cssanimation

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);
  }