CSS animation hover issue

Question

This may be a simple but really frustrating question to me... I will appreciate any feedback.

I have been trying to figure out how I can create an animated image which stays inside a border radius div of 50%, when the mouse hovers I want the image to follow an animated 360 turn of the image, I have already created my little animation in Cinema 4D and uploaded and posted the images I am using down below.

When the mouse leaves the hover state, my original idea was that the image stops and begins when hovered on, or restarts completely, if you view my snippet you can see how horrible it looks when you re-hover over the image, it will start from where it originally ended

So I have tried a few 'solutions' but nothing comes out right.

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

This tutorial kind of worked and made the image end and begin where I wanted it but I could not get the image to be inside the 50% radius div and it kind of was a little buggy, so I believe I have to have the image under css 'background-image' instead of html 'img src='

Hopefully this has been understandable, thanks for any help! it is frustrating me!

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

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

When you hover over the .png image, the .gif image kicks in and does my animation, when the mouse leaves the hover state of the .png image, the .gif image does not restart and creates some really bad looking animation,, it is like good for only one use. i was basically wondering if there was a different solution I could use using all png images and not having that awful outcome? more understandable? sorry should have worded everything correctly — user6148842

Akshay Akshay · Accepted Answer · 2016-09-03T14:51:40

Try out this,

It is done by using animation in css. animation-play-state is used to control pause and continue of the animation on hover.

(Do not put line breaks between the img tags)

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>

It would be better for you to use a spritesheet instead of using all those images. It will make it easier for you

CSS animation hover issue

1 Answers