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">
Related
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">
I use this code to create a blinking zoom-in and zoom-out image, but it only zoom-in and after that, it reset image and again zoom-in.
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
JSFiddle
Easy solution would be:
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
So you just need in the end of animation make image same position as it is at start. : )
You have to animate it to the start point again. Like this:
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
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>
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.
I have been working on an animation of a ball rolling and falling off an edge. First, I made a version which just rolls, and then stops. Working fine. But then, when I added the falling animation to the same code, it doesn't roll it, and I can't do anything about it.
Here is the first snippet:
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
then the second:
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(480px) rotate(360deg);
}
85% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
95% {
animation-timing-function: ease-out;
-webkit-transform: translate(480px, 380px);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px);
}
}
(I know it's only for safari and chrome, but I want to finish it before making it accessible in every browser)
And here is the link to the animation.
Thanks for any help!
EDIT:
It seems it wasn't exactly clear what I want it to do, so
here you can check out what the first snippet does.
A better way, seems to 'chain' the animations:
#goRight img:hover{
-webkit-animation: roll 1s, fall 1s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
#-webkit-keyframes fall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px);
}
100% {
-webkit-transform: translateX(480px) translateY(400px);
}
}
Much cleaner!
disclaimer: I'm no expert in CSS3, but after some tweaking, this seems to work... ish.
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
5% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(48px) rotate(36deg);
}
25% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(240px) rotate(180deg);
}
30% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(284px) rotate(216deg);
}
50% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px) rotate(360deg);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
}
I've created some smaller increments, to tell the engine it should animate in a certain direction; if you put 180deg half way, it seems to roll in the opposite direction.
Needs some tweaking for a smoother animation, probably.