I have this code that spins an image when hovering:
img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: .15s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: .15s;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: .15s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
http://jsfiddle.net/79FHN/1/
I want it to spin to the other direction when un-hovering.
How can I do this?
I can refactor your code to great extent, all you need is
Demo
img {
-webkit-transition: 1s linear;
transition: 1s linear;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
The issue with your code was, that you were using #keyframes which are nothing but animation, so once it triggers, you need to write a separate keyframe for reversing. As your animation was not so complex, I preferred using simple CSS3 properties to get the job done.
If you feel the animation nudges your icon or you deliberately want to nudge on hover, you can use transform-origin property.
Thanks to #Second Rikudo for pointing out the linear issue.
I want to create a spinning image using CSS3, but I don't know why it doesn't work on Chrome.
I tested with Firefox and IE, both working but not Chrome.
I just started learn about #keyframe in CSS3.
What is the mistake in my code?
#-webkit-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#-o-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.playing {
-webkit-animation-name: spin;
-webkit-animation-duration: 1500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 1500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: spin;
-o-animation-duration: 1500ms;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: spin;
animation-duration: 1500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.playing:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
You should use:
`-webkit-transform`
(instead of transform)
See, also, this short demo.
I want to have a css-coded animated rotating svg image. I have no idea how to do that. At the end it has to look exactly like this: http://baveltje.com/logo/logo.html. I am completely new to css. The rotating svg's are gear1.svg and gear2.svg. I want them to rotate 360 degres for infinite time and I want to call them <.div class="gear1"> and gear2.. Is it possible to let it look exactly like the logo does in the link, but rotating?
I tried to use jsfiddle.net/gaby/9Ryvs/7/, but with no results. It has to go the same speed like that fiddle does!
Thanks in advance!
Code:
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
Here is your original animation css (I have removed prefixes to keep it simple):
#gear{
animation-name: ckw;
animation-duration: 15.5s;
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In #gear you should add:
animation-iteration-count to infinite to keep it rolling
transform-origin to center of your div 50% 50% to get gear rolling around itself
display to inline-block
Result:
#gear{
animation-name: ckw;
animation-duration: 15.5s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
/* <--- */
}
#keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
And of course add correct prefixes.
I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome.
The fiddle:
http://jsfiddle.net/9Ryvs/1/
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
<div></div>
To use CSS3 Animation you must also define the actual animation keyframes (which you named spin)
Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info
Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the #keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Demo :
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<div></div>
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
You haven't specified any keyframes. I made it work here.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation: spin 4s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
You can actually do lots of really cool stuff with this. Here is one I made earlier.
:)
N.B. You can skip having to write out all the prefixes if you use -prefix-free.
As of latest Chrome/FF and on IE11 there's no need for -ms/-moz/-webkit prefix.
Here's a shorter code (based on previous answers):
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
/* The animation part: */
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Live Demo: http://jsfiddle.net/9Ryvs/3057/
HTML with font-awesome glyphicon.
<span class="fa fa-spinner spin"></span>
CSS
#-moz-keyframes spin {
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
to {transform:rotate(360deg);}
}
.spin {
animation: spin 1000ms linear infinite;
}
The only answer which gives the correct 359deg:
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
&.active {
animation: spin 1s linear infinite;
}
Here's a useful gradient so you can prove it is spinning (if its a circle):
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
To rotate, you can use key frames and a transform.
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
Example
For the sake of completion, here's a Sass / Compass example which really shortens the code, the compiled CSS will include the necessary prefixes etc.
div
margin: 20px
width: 100px
height: 100px
background: #f00
+animation(spin 40000ms infinite linear)
+keyframes(spin)
from
+transform(rotate(0deg))
to
+transform(rotate(360deg))
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
this will make you to answer the question
For the guys who still search some cool and easy spinner, we have multiple exemples of spinner on fontawesome site : https://fontawesome.com/v4.7.0/examples/
You just have to inspect the spinner you want with your debugger and copy the css styles.
I've come across this post//
Slide out text from an image using CSS on hover
The CSS works perfectly, except I would like for the animation to stop after it's rotated once.
Is this possible? If so how can I accomplish this?
HTML:
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(180deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.srch_btn:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
Change animation-iteration-count: infinite to 2.