CSS同时旋转和替换图像

Question

谁能帮助我了解如何使用 CSS 在悬停时同时旋转和更改图像？当用户将鼠标悬停在图像上时，我想开始旋转并在旋转中间更改图像。到目前为止，我有以下内容，但我不知道如何在悬停时延迟图像更改。

.image-swap {
    background: url("image1.jpg") no-repeat;
    border-radius: 50%;
    height: 300px;
    width: 300px;
    -moz-transition: -moz-transform 0.8s ease-in-out;
    -webkit-transition: -webkit-transform 0.8s ease-in-out;
    -o-transition: -o-transform 0.8s ease-in-out;
    -ms-transition: -ms-transform 0.8s ease-in-out;
    transition: transform 0.8s ease-in-out;
}
.image-swap:hover {
    background: url("image2.jpg") no-repeat;
    cursor: pointer;
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

Answer 1

您真的只需要将background-image 添加到transition 规则。

在此示例中，我还使用容器元素来触发悬停（否则交互区域会随图像一起旋转，如果光标被捕捉到，例如移动的角落，则会导致抖动）。

.image-swap-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.image-swap {
    background-repeat: no-repeat;
    background-image: url("http://placehold.it/300x300/ff0000");
    border-radius: 50%;
    height: 300px;
    width: 300px;
    transform: none;
    transition: transform 1s, background-image 1s;
}

.image-swap-container:hover {
    cursor: pointer;
}

.image-swap-container:hover .image-swap {
    background: url("http://placehold.it/300x300/00ff00");
    transform: rotateZ(360deg);
}

<div class="image-swap-container"><div class="image-swap"></div></div>