I am trying to create a CSS3 animation which rotates a div with image in background.
On hover I want to use the same animation with different speed.
This is the code I'm using for achieving it:
.rocket{
background: url('http://thumbs.ebaystatic.com/d/l96/m/mR3-h7oYVSGGYNTBiKJbtMQ.jpg') no-repeat center;
width: 200px;
height: 200px;
-webkit-animation : spin 1500ms linear infinite;
animation : spin 1500ms linear infinite;
}
.rocket:hover{
-webkit-animation : spin 500ms linear infinite;
animation : spin 500ms linear infinite;
}
#-webkit-keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="rocket"></div>
But to my surprise the hover animation works only in firefox and not in chrome.
For a temporary fix I created one more animation for hover with different name and it works fine:
.rocket{
background: url('http://thumbs.ebaystatic.com/d/l96/m/mR3-h7oYVSGGYNTBiKJbtMQ.jpg') no-repeat center;
width: 200px;
height: 200px;
-webkit-animation : spin 1500ms linear infinite;
animation : spin 1500ms linear infinite;
}
#-webkit-keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rocket:hover{
-webkit-animation : spin2 500ms linear infinite;
animation : spin2 500ms linear infinite;
}
#-webkit-keyframes spin2{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin2{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can you tell me why this is happening and how I can use the same animation with hover in chrome?
FIDDLE
This is a browser bug that is related to chrome there has been an issue filed to fix it. So your best bet is to find a work around for the bug which you seem to have already done so until the browser bug is fixed just keep using your workaround.
Related
When i'm hovering an img, i want it to rotate. My problem is when i hover the img it rotates but if i stop hovering it, it just goes to how it was initially, it doesn't continue the animation... I want the img to rotate when hovering it and continue even if i mouve the mouse out of the img. Also no JS please, I only want to use CSS
ps: Sorry for my bad english, I'm french :P
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
img:hover{
animation-name: Animation;
animation-duration: 1s;
}
This will work:
#keyframes rotation {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
img:hover{
-moz-animation: rotation .6s infinite linear;
-moz-border-radius: 100%;
-o-animation: rotation .6s infinite linear;
-webkit-animation: rotation .6s infinite linear;
-webkit-border-radius: 100%;
animation: rotation .6s infinite linear;
}
<img src="https://www.gravatar.com/avatar/1ebceb30742d4815e63f649cbb853834?s=32&d=identicon&r=PG&f=1">
My fiddle example:
https://jsfiddle.net/e4rL56ja/
For some reason my circle that I created is rotating incorrectly, this is a very strange issue, it's moving/bobbing around when I just want it to stay in an exact place.
Has anyone encountered an issue like this before?
I attempted to do stuff such as border-radius, but there was no luck there
I hope you guys can help out with my issue!
HTML:
<div class='circle rotating'>
</div>
CSS:
.circle {
background: url(https://i.ibb.co/8j8nSns/example.png) no-repeat;
width: 547px;
height: 530px;
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
The wobbling you're seeing is due to the height and width not being the same. A "perfect" circle will have the exact same height and width. I also changed the background so that it wasn't the image of the wobbling circle itself. And added a border-radius of 50%. You can clearly now see that the circle is rotating as it should.
https://jsfiddle.net/3gktzevm/
.circle {
background: linear-gradient(to right, #333333, #dd1818);
width: 530px;
height: 530px;
border-radius: 50%;
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
See this below code.... and see circel is rotating and see circle border also rotate.
.circle {
width: 500px;
height: 500px;
background-color:red;
border-radius: 50%;
border: 2px dashed blue;
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
}
<div class='circle rotating'>
</div>
You should be giving same height and width, Also try to use a proper centered png for circle. Don't forget to cover background too for .circle: background-size: cover;
You image has a dimension of 547x530 that's and your circle is within this area but not centred 1. To fix this you can make the container to be 564x547. You add the difference 17px (547 - 530) on the right then you make the image aligned to the left and it will get centred in the container and it will rotate like you want.
There is also some pixel from the bottom that you need to consider to have a perfect centring:
.circle {
background: url(https://i.ibb.co/8j8nSns/example.png) left bottom no-repeat;
width: 564px;
height: 536px;
box-sizing: border-box;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 1s linear infinite;
}
<div class='circle rotating'>
</div>
Or adjsut the alignment to the right top and make the box to be 530x530. This will trim the extra space from the image and keep only the circle
.circle {
background: url(https://i.ibb.co/8j8nSns/example.png) right top no-repeat;
width: 530px;
height: 530px;
box-sizing: border-box;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 1s linear infinite;
}
<div class='circle rotating'>
</div>
1 To better illustrate the issue simply add border to the main image to see the gap on the left and bottom size:
img {
max-width:100%;
border:1px solid;
}
<img src="https://i.ibb.co/8j8nSns/example.png">
Why isn't transform: scale(0); working on a animated element?
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#box {
width: 150px;
height: 150px;
background: red;
animation: spin .5s infinite linear;
transform: scale(0);
}
I guess its because the keyframe take over transform, but even with !important after transform: scale(0) its still not changing.
http://jsfiddle.net/yun0xu8t/1/
You need to move transform: scale(0); to #keyframes
To rotate and scale together
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg) scale(0); }
}
Hey I do have the following code :
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
and the call :
-webkit-animation: rotate 1000ms infinite linear;
Unfortunately, my spinner is still not rotating on Ipad/Iphone
Any idea why ?
Thanks !
The came from the fact that I needed :
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
It is now fixed
There's an icon in the Font Awesome set that I want to flip horizontally and then spin in that direction, which is the opposite of the regular spin effect.
There are a number of ways to do each, but none that I know that will do both since the effects seem to cancel each other out?
If I flip it,
.fa-refresh {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
then animate it,
.icon-spin-reverse {
display: inline-block;
-moz-animation: spin-reverse 2s infinite linear;
-o-animation: spin-reverse 2s infinite linear;
-webkit-animation: spin-reverse 2s infinite linear;
animation: spin-reverse 2s infinite linear;
}
#-moz-keyframes spin-reverse {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(-359deg); }
}
#-webkit-keyframes spin-reverse {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-359deg); }
}
#-o-keyframes spin-reverse {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(-359deg); }
}
#-ms-keyframes spin-reverse {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(-359deg); }
}
#keyframes spin-reverse {
0% { transform: rotate(0deg); }
100% { transform: rotate(-359deg); }
}
the flip will be canceled, and it will just spin in reverse.
Is there any way to do both?
Your animation is overriding the initial transform. You need to apply both of the transforms in your animation:
.fa-refresh {
transform: scaleX(-1);
animation: spin-reverse 2s infinite linear;
}
#keyframes spin-reverse {
0% {
transform: scaleX(-1) rotate(-360deg);
}
100% {
transform: scaleX(-1) rotate(0deg);
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-refresh"></i>
The simple way to reverse your animation is to reverse the direction of its CSS property called animation-direction.
animation-direction: reverse;
You can also solve the problem without additional CSS.
The outer <i> flips the inner <i> first. The inner <i> spins. See here:
<i class="fa fa-flip-vertical">
<i class="fa fa-spin fa-refresh"></i>
</i>