html - CSS动画悬停问题

Question

这对我来说可能是一个简单但非常令人沮丧的问题......我将不胜感激任何反馈。

我一直在尝试弄清楚如何创建一个动画图像，该图像保持在 50% 的边界半径 div 内，当鼠标悬停时我希望图像跟随图像的 360 度动画旋转，我已经创建了我在 Cinema 4D 中制作的小动画，并在下方上传并发布了我正在使用的图像。

当鼠标离开悬停状态时，我最初的想法是图像停止并在悬停时开始，或者完全重新启动，如果您查看我的代码片段，您可以看到当您重新悬停在图像上时它看起来有多可怕，它将从它最初结束的地方开始

所以我尝试了一些“解决方案”，但没有一个是正确的。

http://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/

本教程有点奏效，使图像在我想要的位置结束并开始，但我无法让图像位于 50% 半径的 div 内，而且有点小问题，所以我相信我必须拥有css 'background-image' 下的图像而不是 html 'img src='

希望这是可以理解的，感谢您的帮助!这让我很沮丧!

html, body {
	background-color:black;
	margin:0;
	padding:0;
	font-family: sans-serif;
	color: white;	
}
.icons {
	display: block;
	position: relative;
	height: 120px;
	width: 120px;
	border-radius: 50%;
	border: 2px solid white;
	margin: 0 auto;
	margin-top: 30px;
	float: center;
	background-image: url(https://s13.postimg.org/fuby3qdr7/Logo5_0000.png);
	background-size: 250px;
	background-position: center;
	
}
.icons:hover {
	background-image: url(https://s11.postimg.org/b36lstn0j/19z8gw.gif);
	background-size: 250px;
	 transition-delay:0.5s;
}
.icons:before {
	position:absolute;
	content:"Hover";
	font-size:12px;
	color: white;
	letter-spacing: 5px;
	text-align: center;
	left: 28%;
	bottom: -20%;
}

<div class="icons"> </div>

img 00 - https://s13.postimg.org/fuby3qdr7/Logo5_0000.png

img 01 - https://s13.postimg.org/hanglvgo3/Logo5_0001.png

img 02 - https://s13.postimg.org/r98f8cq3n/Logo5_0002.png

img 03 - https://s13.postimg.org/crb80cysj/Logo5_0003.png

img 04 - https://s13.postimg.org/496tt4ylf/Logo5_0004.png

img 05 - https://s13.postimg.org/bqg18co4j/Logo5_0005.png

img 06 - https://s13.postimg.org/519hsc2sj/Logo5_0006.png

img 07 - https://s13.postimg.org/4ps1fkmcj/Logo5_0007.png

img 08 - https://s13.postimg.org/dm2tjicyr/Logo5_0008.png

img 09 - https://s13.postimg.org/k11ug6joj/Logo5_0009.png

img 10 - https://s13.postimg.org/nyp45l6hv/Logo5_0010.png

img 11 - https://s13.postimg.org/p298hjr4z/Logo5_0011.png

img 12 - https://s13.postimg.org/dr6kt6k9v/Logo5_0012.png

img 13 - https://s13.postimg.org/v5qt1gher/Logo5_0013.png

img 14 - https://s13.postimg.org/4yu7j8oir/Logo5_0014.png

img 15 - https://s13.postimg.org/6f5q1drfn/Logo5_0015.png

img 16 - https://s13.postimg.org/6t720zbj7/Logo5_0016.png

动图 - https://s11.postimg.org/b36lstn0j/19z8gw.gif

Answer 1

试试这个，

这是通过在css中使用animation来完成的。 animation-play-state 用于控制悬停时动画的暂停和继续。

(img 标签之间不要换行)

html, body {
  background-color:black;
  margin:0;
  padding:0;
  font-family: sans-serif;
  color: white;	
}
.icons {
  display: block;
  position: relative;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 2px solid white;
  margin: 0 auto;
  margin-top: 30px;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}

.slide{
  width:100%;
  height:100%;
  position:absolute;
  white-space:nowrap;
  top:0;
  left:0;
  animation:slide 2s steps(16,end) infinite;
  animation-play-state:paused;
  text-align:center;
  box-sizing:border-box;
}

.slide img{
  width:100%;
  height:100%;
}
.icons:hover .slide{	
  animation-play-state:running;
}

@keyframes slide{
  100%{
    left:-1600%;
  }
}

<div class="icons">
	<div class="slide">
      <img src="https://s13.postimg.io/fuby3qdr7/Logo5_0000.png"/><img src="https://s13.postimg.io/hanglvgo3/Logo5_0001.png"/><img src="https://s13.postimg.io/r98f8cq3n/Logo5_0002.png"/><img src="https://s13.postimg.io/crb80cysj/Logo5_0003.png"/><img src="https://s13.postimg.io/496tt4ylf/Logo5_0004.png"/><img src="https://s13.postimg.io/bqg18co4j/Logo5_0005.png"/><img src="https://s13.postimg.io/519hsc2sj/Logo5_0006.png"/><img src="https://s13.postimg.io/4ps1fkmcj/Logo5_0007.png"/><img src="https://s13.postimg.io/dm2tjicyr/Logo5_0008.png"/><img src="https://s13.postimg.io/k11ug6joj/Logo5_0009.png"/><img src="https://s13.postimg.io/nyp45l6hv/Logo5_0010.png"/><img src="https://s13.postimg.io/p298hjr4z/Logo5_0011.png"/><img src="https://s13.postimg.io/dr6kt6k9v/Logo5_0012.png"/><img src="https://s13.postimg.io/v5qt1gher/Logo5_0013.png"/><img src="https://s13.postimg.io/4yu7j8oir/Logo5_0014.png"/><img src="https://s13.postimg.io/6f5q1drfn/Logo5_0015.png"/><img src="https://s13.postimg.io/6t720zbj7/Logo5_0016.png"/>
  </div>
</div>

最好使用 spritesheet 而不是使用所有这些图像。它会让你更轻松