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
Related
I'm creating a custom marquee for my application.. I want to text animation run only 1 time and stop completely. My code is running repeat after 20s and never stop. I tried replace infinite by "1" ( loop ) and behavior="scroll" but it doesn't work. How to implement it?
html
<li class="marquee" ng-show="notification_message">
<a href="#">
message
</a
</li>
css
#keyframes left-one {
0% {
transform: translateX(100%);
}
10% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes left-two {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(100%);
}
60% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.marquee a:nth-child(1) {
animation: left-one 20s ease infinite;
}
.marquee a:nth-child(2) {
animation: left-two 20s ease infinite;
}
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); }
}
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>
I have just added 'animation-delay' to my code so that content slides from offscreen only after 5 seconds. However, I am finding that the content being moved shows in the 'final' position while the 'delay' is running, then after 5 seconds the contents slides in from the left (as required).
Does anybody know how I can adapt my code so that the content isn't initially visible in the final location? Here is a stripped down version of my code:
<style>
div {
width:100px;
height:100px;
background-color:red;
-webkit-animation: slideFromLeft 3500ms ease-out;
-moz-animation: slideFromLeft 3500ms ease-out;
-ms-animation: slideFromLeft 3500ms ease-out;
animation-delay:5s;
-webkit-animation-delay:5s; /* Safari and Chrome */
}
#-webkit-keyframes slideFromLeft {
from {
opacity: 1;
-webkit-transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-moz-keyframes slideFromLeft {
from {
opacity: 1;
-moz-transform: translateX(-100%);
}
to {
opacity: 1;
-moz-transform: translateX(0%);
}
}
#-ms-keyframes slideFromLeft {
from {
opacity: 1;
-ms-transform: translateX(-100%);
}
to {
opacity: 1;
-ms-transform: translateX(0%);
}
}
</style>
<body>
<div>
Add opacity:0 to the css for the initial div. That way it is invisible until the animation sets in.
Additionally, add animation-fill-mode: forwards; so it keeps the endstate.
http://jsfiddle.net/L29rW/1/