I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla, and also on Android but not working on iOS both Chrome and Safari.
The problem is that I can see the image displayed but the animation spinning is not working.
I have the following animation applied to my simple SVG:
<img class="img-sth"src="/img/image.svg">
The css code:
.img-sth {
position: absolute;
height: 80px;
top: -3px;
left: 16px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Below see snippet where I added the 0% {} to each #keyframes definition. Your code did not work for me on macOS Safari (desktop) either when I initially tested it so I thought it may have been an issue with how the #keyframes animation was defined. See MDN docs for more info.
I used a placeholder image for the demo and tweaked the positioning so it was all in the viewport.
.img-sth {
position: absolute;
height: 80px;
top: 20px;
left: 20px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster {
0% {}
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin-faster {
0% {}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
<img class="img-sth"src="https://via.placeholder.com/80x80">
Related
This question already has answers here:
CSS3 Rotate Animation
(7 answers)
Closed 6 months ago.
So I wonder how to rotate a image in HTML, normal speed and using a simple trick.
Somebody could help me?
\*Dont know how to do it*\
<img src="https://google.com/favicon.ico"
You can rotate a img using transform css property
You can try this
img {
transform: rotate(0deg);
animation: rotate 1s infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<img src="https://google.com/favicon.ico" />
im not sure if this what you ask for !
.rotate {
animation: rotation 3s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<img class="rotate" width="100" height="100" src="https://google.com/favicon.ico" />
img {
position: absolute;
width: 100%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-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); } }
<img src="https://www.google.com/favicon.ico">
No worries, found it out!
Source: https://stackoverflow.com/a/46085346/17699715
I'm trying to rotate a mat-icon
in css I'm using the webkit prefix. For information this code is working on FF.
#keyframes rotateIcon {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#-webkit-keyframes rotateIcon {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
.animatedIcon {
animation: rotateIcon 2s infinite;
-webkit-animation: rotateIcon 2s infinite;
}
In HTML
<mat-icon class="status-icon animatedIcon">
{{getStatusIcon('IN_PROGRESS')}}
</mat-icon>
I'm getting static icon that does not rotate.
Here's a snippet
I'm working on this version of chrome :86.0.4240.75
Try this CSS:
#keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animatedIcon {
animation: rotateIcon 2s infinite;
-webkit-animation: rotateIcon 2s infinite;
}
and for HTML, do this:
<mat-icon class="status-icon animatedIcon">
{{getStatusIcon('IN_PROGRESS')}}
</mat-icon>
Solution Details:
You have used the wrong CSS property. The property name is transform and it takes a function rotate(0deg).
I am facing a problem with svg on my portfolio page.
I have created svg and I used animation to spin the svg in infinite loop. Problem occures when I reload my portfolio page multiple times. When I do, my screen starts to move towards the center of spinning. I am looking for fix, anyone knows what might help?
images:
after few reloads:
and here is my code:
html {
font-size: 62.5%;
background-color: var(--color-tertiary);
overflow-x: hidden; // My svg is really big and it overflows page, so I need to use this
}
/***************** HEADER **********************/
.header{
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
&__logo{ // this is the svg
position: absolute;
top: 0;
left: 30rem;
width: 180rem;
z-index: -1; // I use z-index to make sure that moving svg is in the background of the page
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 500s linear infinite;
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);} }
}
&__wrapper{
z-index: 10;
}
}
What I see that this part:
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);} }
is inside of the class. All keyframes should be standalone. In the #keyframes line also remove -webkit- from transform.
I want to create "roll in" effect with image of 8-ball. I want this animation to load on page load and to end then ball reaches text layer that's in the middle (of revolution slider).
On codepen I found similar thing that I have used and achieved result at some point but animation goes infinite. The question is, how to achieve that ball stops when it reaches text layer?
This is what I've got so far:
.circle {
display: block;
width: 100px;
height: 100px;
background: none;
border-radius: 50%;
/* Animation to spin and move the sphere */
-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
/* Spinning the sphere using key frames */
#-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);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Move sphere from left to right */
#-moz-keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
#-ms-keyframes moveLeftToRight {
0% {
left: -50px;
}
50% {
left: 50%;
}
}
#keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
#-webkit-keyframes moveLeftToRight {
0% {
left: -100px;
}
50% {
left: 50%;
}
}
<img class="circle" src="https://i.imgur.com/1KfVzUa.png" />
You need to add the fill-mode to freeze the animation state at the end of the animation.
-webkit-animation-fill-mode: forwards;
forwards leaves the animation in the state of the last frame
backwards leaves the animation at the start
I followed the explanations on this jsFiddle page http://jsfiddle.net/gionaf/Ugc5g/ to spin an image on my page http://www.prezzio.net/ but it does not work: the image is not spinning.
To be clear, here is the image to spin:
Here is the original code:
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-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); } }
<img class="spin" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
Any idea ? Thanks.
The culprit lies in your main_style.css line 369.
Add these lines,
#-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); } }
And it should spin as you expect.
Try this, here is Demo with all Vendor prefixes
img {
animation: 2s spin infinite linear;
}
#keyframes spin {
to {transform: rotate(360deg);}
}
<img src="http://www.prezzio.net/files/theme/spin.png" alt="">