Question

我正在努力解决的问题是css动画。

我有八张图片，某些图像旋转，其他图像是灰度图像。当将鼠标悬停在旋转图像上时，我希望它完成旋转并停在原始位置（无旋转）。但最重要的是，当悬停结束时，我希望它再次开始旋转，但与其他旋转元素同时旋转。

这可能吗？

这是我迄今为止所管理的内容

＆＃13;

.kanto {
  text-align: center;
}

.kanto img {
  width: 37px;
  margin: 1px;
}

.collected {
  animation: rotation 3s infinite linear;
}

.collected:hover {
  animation-play-state: paused;
}

.uncollected {
  filter: grayscale(100%);
}

@-webkit-keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}

＆＃13;

<div class="kanto">
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
</div>

＆＃13;

Answer 1

而不是暂停动画，让它坚持只有一个循环，这应该做的伎俩，像这样（唯一的问题是必须完成一个动画循环，所以如果你在前3秒内悬停在，动画只会在动画周期结束时“暂停”。）：

.kanto {
  text-align: center;
}

.kanto img {
  width: 37px;
  margin: 1px;
}

.collected {
  animation: rotation 3s infinite linear;
}

.collected:hover {
  animation: rotation 3s linear !important;
}

.uncollected {
  filter: grayscale(100%);
}

@-webkit-keyframes rotation {
 
  to {
    transform: rotateY(360deg);
  }
}

<div class="kanto">
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
</div>

如果您不能等待一个完整周期完成，您可以解决它，将图像包装在div中并注入:after元素，这将是一个静止图像，如下所示：

.kanto {
  text-align: center;
}

.kanto img {
  width: 37px;
  margin: 1px;
}
.wrapper {
  display:inline-block;
  }
.collected {
  animation: rotation 3s infinite linear;
}

.wrapper:hover .collected {
  animation: rotation 3s linear !important;
  visibility:hidden;
}
.wrapper:hover:after{
    height: 37px;
    margin: 1px;
    display: inline-block;
    content: '';
    background-image: url(https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png);
    width: 37px;
    background-size: contain;
    margin-left: -42px;
}
.uncollected {
  filter: grayscale(100%);
}

@-webkit-keyframes rotation {
 
  to {
    transform: rotateY(360deg);
  }
}

<div class="kanto">
 <div class=wrapper>
 <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
 </div>
 <div class=wrapper>
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  </div>
  <div class=wrapper>
  <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  </div>
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
  <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" />
</div>

CSS - 停止/启动元素的动画，但与其他元素保持同步

1 个答案: