Spin on hover css

CSS3 — Animation Scale/Rotate on Hover

I tried and wrote this code but it have a problem, first issue is text inside div will be fuzzy (fluffy)! and second scale animation not play softly, all i want is play animation softly, scale once then rotate infinite on hover.

@-webkit-keyframes socialspin < from < -webkit-transform: scale(2) rotate(0deg); -moz-transform: scale(2)rotate(0deg); -ms-transform: scale(2) rotate(0deg); -o-transform: scale(2) rotate(0deg); transform: scale(2) rotate(0deg); >to < -webkit-transform: scale(2) rotateY(90deg); -moz-transform: scale(2) rotateY(90deg); -ms-transform: scale(2) rotateY(90deg); -o-transform: scale(2) rotateY(90deg); transform: scale(2) rotateY(90deg); >> 

I am very confused by the question. The text is blurred because you are using an animation, which is done to make the transition seem smoother. What scale animation are you on about? There is only one in your question and it is constant: there won’t be a transition.

sorry for my bad english (probably) , 1st issue: text inside the div is fuzzy, any solution to fix this? 2st issue: scale run without any animation (softly). @jaunt transition not help to make it smooth.

3 Answers 3

The best way to have a smooth result is not to have a zoom in (scale=2) but a zoom out (scale=0.5), but of course in the opposite state.

And I don’t believe that what you want can be achieved with a single animation. I have used 2 elements, and one handles the rotation and the other the scale

#container < width: 400px; height: 400px; >#container:hover < -webkit-animation: socialspin 5s linear 0s infinite alternate; >@-webkit-keyframes socialspin < from < -webkit-transform: rotate(0deg); >to < -webkit-transform: rotateY(90deg); >> @keyframes socialspin < from < transform: rotate(0deg); >to < transform: rotateY(90deg); >> #base < width: 400px; height: 400px; background: yellow; transform: scale(0.5); transition: transform 5s; transform-origin: top left; font-size: 200%; >#container:hover #base

We cannot, as of yet, completely make the font clear. This is because you are using an animation. If there was no spinning, the text would not be fuzzy. However, we can try using several font smoothing properties to try and combat this. None of them are very good but they do improve legibility slightly.

Regardless, here is the fix for the second part:

I found a hack. This will remove the blur during the rotation but not during the scaling up.

.square < width:100px; height: 100px; background-color:black; margin: 50px; >p < -webkit-font-smoothing: antialiased; color:white; text-align: center; padding-top: 35px; >.square:hover < -webkit-animation: scale 1s linear 0s 1, spin 1s linear 1s infinite alternate; >.square:hover p < -webkit-animation: scaletext 1s linear 0s 1; >@-webkit-keyframes scale < from to > @-webkit-keyframes scaletext < from to > @-webkit-keyframes spin < from to >

(I removed the prefixes to condense the answer)

here is the example and the point is first to describe all features in the main div as defaults because animation uses main elements rules to calculate time etc. and second point here you used 90 degrees to turn but a complete turning back can be done by 180 degrees which is the angle of a line here is the code

—update— here is the exxample you can see scale animates the problem was in your animation scaling started from 2 and ended by 2 so there was no animation for that —update— here we go if you run transition first and by the time while transition is running make animation wait by delay time of animation it works fine you can see here

 div < width: 200px; height: 200px; background: yellow; -webkit-transform:scale(1) rotate(0); transform:scale(1) rotate(0); margin-left:200px; margin-top:50px; transition:-webkit-transform .5s linear; transition:transform .5s linear; >div:hover < -webkit-transform:scale(2) rotate(0); transform:scale(2) rotate(0); -webkit-animation: socialspin 5s linear .5s infinite alternate; -moz-animation: socialspin 5s linear .5s infinite alternate; >@-webkit-keyframes socialspin < from < -webkit-transform: scale(2) rotate(0deg); transform:scale(2) rotate(0deg); >to < -webkit-transform: scale(2) rotateY(180deg); transform: scale(2) rotateY(180deg); >> 

No my friend, i want to scale(2) on hover! not on default. in your fiddle still have problems. scale not works smoothly, text still is fuzzy.

about fuzzy text i dont think you can do something try to make animation faster by shortening the time and this issue might be slightly invisible

ok, i see your update, but still have a problem, as i tell in question, i want to run scale animation ONCE, then run rotate in infinite.

Источник

How to create spin effect using HTML & CSS?

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with your code and explain what you have tried and why it did not work.

2 Answers 2

You can do this by using a single element and two pseudos. Make the 2 pseudo elements larger than the container element, position them behind the container and add a rotate animation to them.

Note: This is only a base sample that would help you get started. I would leave the fine tuning part for you to handle. You can read more about the CSS animation properties in this MDN page.

.shape < position: relative; /* used to position the pseudos relative to the parent */ height: 100px; width: 100px; background: white; border: 1px solid; margin: 100px; /* required because children are larger than parent */ >.shape:after, .shape:before < position: absolute; content: ''; >.shape:before < height: 125%; /* make one pseudo 25% larger than parent */ width: 125%; top: -12.5%; /* 25/2 to make sure its center is same as the parent's */ left: -12.5%; /* 25/2 to make sure its center is same as the parent's */ background: red; z-index: -1; /* send it behind the parent */ >.shape:after < height: 150%; /* make this pseudo larger than the parent and the other pseudo */ width: 150%; top: -25%; /* 50/2 to make sure its center is same as the parent's */ left: -25%; /* 50/2 to make sure its center is same as the parent's */ background: black; z-index: -2; /* send it behind both the parent and other pseudo */ >/* add animation when hovering on parent */ .shape:hover:before < animation: rotate 3s linear infinite; >.shape:hover:after < animation: rotate-rev 3s linear infinite; >@keyframes rotate < to < transform: rotate(359deg); /* some browsers don't display spin when it is 360 deg */ >> @keyframes rotate-rev < to < transform: rotate(-359deg); /* reverse direction rotate */ >>

Источник

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

I have an element that spins when you hover over it indefinitely. When you hover out, the animation stops. Simple:

@-webkit-keyframes rotate < from < -webkit-transform: rotate(0deg); >to < -webkit-transform: rotate(360deg); >> .elem:hover

When you hover out, though, the animation abruptly ceases, reverting to 0 degrees. I’d like to animate back to that position, but I’m having some trouble working out the syntax. Any input would be awesome!

To be honnest, I don’t think you can. I created a jsFiddle anyway, so if anyone have an idea. jsfiddle.net/4Vz63/1

Thanks for the jsfiddle — stumped myself, it seems like it should be possible with keyframes, but I’m not all that familiar with CSS# animation syntaxes yet.

I think you can get the reverse effect of an animation only by using the -webkit-transition property and not with the -webkit-animation

Of course you can do that in JS but not in pure CSS. Also please check this solution which is kind of close to what you want — jsfiddle.net/SebastianPataneMasuelli/nkEwQ/7

7 Answers 7

The solution is to set the default value in your .elem. But this annimation work fine with -moz but not yet implement in -webkit

It works fine with Firefox but not with Chrome

.elem < position: absolute; top: 40px; left: 40px; width: 0; height: 0; border-style: solid; border-width: 75px; border-color: red blue green orange; transition-property: transform; transition-duration: 1s; >.elem:hover < animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; >@keyframes rotate < from to >

I’m a complete arse for somehow not noticing this answer. A fix in FF is better than nothing, could be patched with JS to work in Chrome.

Tried jFiddle it Worked nicely in chrome and I abrupt animation in FF. Looks like if increase the animation duration then rotation works nicely. Something like -moz-animation-duration: 6s (nothing magical about 6s) 1.5s is too fast for FF

This is not working for me in Chrome 35. It works (kind of) in FF 30. If I mouse over, leave, then mouse over before it resets to 0, it finishes the animation then jumps to start the infinite rotation animation.

Here’s a simple working solution:

@-moz-keyframes spin < 100% < -moz-transform: rotate(360deg); >> @-webkit-keyframes spin < 100% < -webkit-transform: rotate(360deg); >> @keyframes spin < 100% < -webkit-transform: rotate(360deg); transform:rotate(360deg); >> .elem:hover

Cross browser compatible JS solution:

var e = document.getElementById('elem'); var spin = false; var spinner = function() < e.classList.toggle('running', spin); if (spin) setTimeout(spinner, 2000); >e.onmouseover = function()< spin = true; spinner(); >; e.onmouseout = function()< spin = false; >;

body < height:300px; >#elem < position:absolute; top:20%; left:20%; width:0; height:0; border-style: solid; border-width: 75px; border-color: red blue green orange; border-radius: 75px; >#elem.running < animation: spin 2s linear 0s infinite; >@keyframes spin < 100% < transform: rotate(360deg); >>

It took a few tries, but I was able to get your jsFiddle to work (for Webkit only).

There’s still an issue with the animation speed when the user re-enters the div.

Basically, just set the current rotation value to a variable, then do some calculations on that value (to convert to degrees), then set that value back to the element on mouse move and mouse enter.

Источник

Rotate & Spin An Image In HTML CSS (Simple Examples)

Welcome to a tutorial on how to rotate images in HTML and CSS. So you have an image or logo that needs to be rotated, or maybe even animated. But it is too much trouble to go through all that crazy image editing and creating an animated GIF. Good news, it is possible to rotate images in modern CSS.

That covers the basics, but we can actually do more and animate a spinning image using rotate. Let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CSS ROTATE IMAGES

All right, let us now get into the basic examples of how to use CSS rotate.

BASIC ROTATE IMAGE

 .ro-cw-90 < transform: rotate(90deg) >.ro-ccw-90 No rotate 
 
 

No rotate

Rotate 90 degrees clockwise

Rotate 90 degrees counter-clockwise

Yep, it’s that simple. Just add transform: rotate(N deg) to the image to rotate it – A positive degree will rotate the image in the clockwise direction, and a negative degree to rotate it in the counter-clockwise direction.

ROTATE IN THE 3D SPACE

 .ro3D 

Apart from the “basic rotate”, here is something a little bit more interesting – We can actually simulate a 3D rotation using rotateX , rotateY , and rotateZ .

ROTATE CAN BE APPLIED TO ANYTHING

Finally, here is kind of a “Captain Obvious” thing. Rotate is not just restricted to images, it will also work with pretty much every other HTML element.

ADDING ANIMATIONS – SPINNING IMAGES

So far so good? With the basics out of the way, let us now get into something a little more “advanced” – Doing spin animations using CSS rotate.

SPIN ANIMATION

• First, we have to define the animation @keyframes spinning .
  • The keyframes should start with from < transform: rotate(0deg) >, end with to < transform: rotate(360deg) >.
  • This should be pretty self-explanatory, it will just spin the image in circles.
  • animation-duration controls the speed of the animation.
  • animation-iteration-count: infinite will just keep on spinning the image.
  • animation-timing-function controls how the animation will look like. Feel free to change this and see how the others work.

  SPIN ON HOVER

  

  Hover to spin

  This is a rather interesting “remix” of the above. Simply attach the animation to a :hover pseudo-class, and the spin animation will only be applied on mouseover. Good for adding some flair to otherwise boring buttons.

  SPIN IN 3D

  

  Hover to spin

  We don’t live in the Stone Age of the Internet anymore. Yes, creating a 3D spin effect is as easy as changing the @keyframes to use the “3D counterparts” of rotating instead – rotateX rotateY rotateZ .

  EXTRA BITS & LINKS

  That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

  LINKS & REFERENCES

  TUTORIAL VIDEO

  INFOGRAPHIC CHEATSHEET

  

  THE END

  Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

  Источник