Question

我有这个CSS代码并在悬停时放大图像，我现在要做的是，当项目关闭时，将图像悬停在动画上以恢复其原始位置

.item: hover img {
-webkit-animation: animatedBackground 1s ease-out 1;
        -moz-animation: animatedBackground 1s ease-out 1;
        animation: animatedBackground 1s ease-out 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

@-webkit-keyframes animatedBackground {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
}
@-moz-keyframes animatedBackground {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
}
@keyframes animatedBackground {
  0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
}

我将如何做到这一点。

Answer 1

你可以简化所有这些，只需使用轻松进出和比例=）

.item img {
    transition: 1s ease-in-out;
}

.item:hover img {
    transform: scale(1.1);
}

Answer 2

我会使用转换而不是动画。它会像这样。

.item {
  color: orange;
  transition:
    color 1s,
    transform 1s;
}

.item:hover {
  color: darkorange;
  transform: scale(2);
}

More info.

悬停的CSS动画

2 个答案: