CODEWITHSUNDEEP
csscss-selectorshover
Andor Nagy
Andor Nagy

Reputation: 174

Smooth CSS rotate animation on hover

I've create a button, and I want it to rotate 360deg on mouse hover, and rotate backwords 360deg on hover off. So far it work well, but if you go slowly towards it with the mouse, it flickers.

Here's the short version of the code:

.btn {
	display: block;
	margin: 60px auto;
	width: 250px;
	padding: 15px;	
	position: relative;	

	color: #3498db;
	font-weight: 300;
	font-size: 24px;
	text-decoration: none;
			
	border: 5px solid #3498db;
					
	transform: rotate(360deg);
	transition: all 0.5s;
	transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
}

.btn-rotate:hover {
	transform: rotate(0deg);
	transition-delay: 0;
	transition: all 0.5s;
}
<a href="#" class="btn btn-rotate">I am a button!</a>

for full code, check the codpen demo http://codepen.io/andornagy/pen/ojBNZx

Upvotes: 0

Views: 3563

Answers (2)

Shikkediel
Shikkediel

Reputation: 5205

Here's an idea where it adds an extra pseudo element only when you're hovering :

Demo

.btn:after {
  content: '';
  width: 300px;
  height: 150px;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:hover:after {
  display: block;
}

Gave it a bit of background color, just so it's better visible what's going on...

For the most control, I'd resort to some JavaScript though.

Upvotes: 1

rajuGT
rajuGT

Reputation: 6404

The flicker issue is happening because, when you hover on the element, the elements start to rotate. After rotating some x degree, the element would've rotated to certain degree and the mouse/cursor is not anymore on the element. This is the reason the flicker is happening.

Comparing to the above one, I feel using wrapper (div) and analyzed how much width we may need, we set that to div. On div:hover element, we can perform the transition. It gives better result compared to now.

Here is the fiddle

.buttonHolder {
    padding: 50px;  
}

.buttonHolder:hover .btn-rotate {
    transform: rotate(360deg);
    transition-delay: 0;
    transition: all 0.6s;
}

Upvotes: 2

Related Questions