CSS

Question

我遇到的问题是 css 动画。

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

这可能吗？

这是我到目前为止所管理的内容

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

<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>

Answer 1

与其暂停动画，不如让它坚持一个循环，这样应该可以解决问题，就像这样（唯一的问题是必须完成一个动画循环，所以如果你将鼠标悬停在第一个3秒，当动画循环完成时，动画只会"pause"。):

.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 - stopping/starting 元素动画，但与其他元素保持同步

CSS - stopping/starting animation of element, but keeping in sync with other elements

html

keyframe

css-animations