Question

我很难（再次）理解CSS动画 - 特别是这个旋转动画。当您将鼠标悬停在图像上时，它应该开始来回旋转。它这样做，但只有在转移到左下角之后。我一直在寻找类似的问题，但没有找到答案，为什么会发生这种情况或如何防止它。

img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

img:hover {

  animation-name: freakout;

  animation-duration: .5s;

  animation-iteration-count: infinite;

}

@keyframes freakout {

  0%, 100% {

    -ms-transform: rotate(0deg);

    /* IE 9 */

    -webkit-transform: rotate(0deg);

    /* Chrome, Safari, Opera */

    transform: rotate(0deg);

  }

  50% {

    -ms-transform: rotate(7deg);

    /* IE 9 */

    -webkit-transform: rotate(7deg);

    /* Chrome, Safari, Opera */

    transform: rotate(7deg);

  }

}

<img src="http://www.swimwithamanatee.biz/normal_ian-symbol-trichechus-spp22_left.png" />

Answer 1

这背后的原因是，img标记中的Transform属性使用Translate函数以使图像居中对齐，但是当您将鼠标悬停在图像上时，Transform属性将变为Rotate属性，从而导致在将鼠标悬停在图像上时位置发生偏移。我更改了代码，这可以正常工作。

   img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

img:hover {

  animation-name: freakout;

  animation-duration: .5s;

  animation-iteration-count: infinite;

}

@keyframes freakout {

  0%, 100% {

    -ms-transform: rotate(0deg)translate(-50%, -50%);

    /* IE 9 */

    -webkit-transform: rotate(0deg)translate(-50%, -50%);

    /* Chrome, Safari, Opera */

    transform: rotate(0deg)translate(-50%, -50%);

  }

  50% {

    -ms-transform: rotate(7deg)translate(-50%, -50%);

    /* IE 9 */

    -webkit-transform: rotate(7deg)translate(-50%, -50%);

    /* Chrome, Safari, Opera */

    transform: rotate(7deg)translate(-50%, -50%);

  }

}

<img src="http://www.swimwithamanatee.biz/normal_ian-symbol-trichechus-spp22_left.png" />

CSS旋转动画转换元素

1 个答案: