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
Related
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
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); }
}
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>
My animation works quite nicely but it seems its slipping and doesn't seem to roll. What could be the problem?
FIDDLE HERE : http://jsfiddle.net/erkoda3m/2/
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(300px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(300px) rotate(360deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
The diameter is 150px, so circumference will be 150π = 471.24px. So if the rotation angle is 360°, translateX value will be circumference of the ball, or 471.24px :
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(471.24px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(471.24px) rotate(360deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
If you want to keep translateX constant and change rotate value, instead, you can calculate the angle by (400/471.24)*360 = 305.57deg
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(400px) rotate(305.57deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(400px) rotate(305.57deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
I am using icon-font spinner for showing something is processing.
But the spinner is not spinning in firefox
This is my less code
.animation (#params) {
-webkit-animation:#params;
-o-animation:#params;
animation:#params;
}
.spin {
.animation(spin 1500ms infinite linear);
}
#-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); } }
#-o-keyframes spin {
to { -o-transform: rotate(360deg); } }
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
This is my html code
<div ng-if="showProgressBar" class="spin icon-spinner">
</div>
It is working fine in chrome. In firefox I am able to see static icon not spinning icon