html - CSS动画悬停问题

对我来说，这也许是一个简单但令人沮丧的问题。。。如有任何反馈，我将不胜感激。
我一直在尝试如何创建一个动画图像，它保持在50%的边界半径div内，当鼠标悬停时，我希望图像跟随动画360度旋转图像，我已经在4D影院创建了我的小动画，并上传和发布了下面我使用的图像。
当鼠标离开悬停状态时，我最初的想法是当鼠标悬停在图像上时图像停止并开始，或者完全重新启动，如果你查看我的代码片段，你可以看到当鼠标悬停在图像上时它看起来有多可怕，它将从最初结束的地方开始
所以我尝试了一些“解决方案”，但没有什么是正确的。
http://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/
本教程有点成功，使图像结束并开始在我想要的地方，但我无法使图像在50%半径div内，这有点麻烦，所以我相信我必须在css的“背景图像”下，而不是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>

最佳答案

试试这个，
这是通过在css中使用animation来完成的。animation-play-state用于控制悬停时动画的pause和continue。
（不要在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>

你最好用一个精灵纸，而不是用那些图片。它会让你更容易