In rotate animation, works in Chrome but not in Firefox. Why?
#-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#example {
background: red;
width: 100px;
height: 100px;
-moz-animation: rotate 20s linear 0 infinite;
-webkit-animation: rotate 20s linear 0 infinite;
}
http://jsfiddle.net/WsWWY/
Current Firefox implementations fail unless time values of 0 have units. Use 0s or 0ms.
http://jsfiddle.net/WsWWY/1/
Note: The W3C explicitly allows for the number 0, without units, to be a length value, but it says no such thing for other values. Personally, I hope this changes, but for the time being the Firefox behavior is not incorrect.
Related
As the question says I'd like to rotate an icon 360 degrees one way the rotate back the other repeatedly. Going one direction is easy enough what I don't understand is stopping and going the other direction.
#loading {
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<i id="loading" class="material-icons">autorenew</i>
I have tried creating another rotation going the other direction but it doesn't seem to apply.
#-webkit-keyframes rotationBackwards {
from {
-webkit-transform: rotate(359deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
Transformation doesn't apply on inline elements. You have to make your element a block-level element instead (See Transformable Elements on the specifications - If you include the Martial Icons, this will be set by default).
The Animation itself can simply be done with a rotation to 360 degrees for the first half (50%) and a rotation back to 0 degrees for the second half. Mind that the duration of the animation splits into both directions (given your 2s animation, every direction will take 1s).
#loading {
display: inline-block;
animation: rotation 2s infinite linear;
}
#keyframes rotation {
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>
Here is another idea by simply using alternate value of animation-direction and by keeping your initial animation:
#loading {
animation: rotation 2s infinite linear alternate;
}
#keyframes rotation {
/*from {
transform: rotate(0deg); no needed to define this
}*/
to {
transform: rotate(360deg);
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>
I don't have much knowledge in css3 and I got this code fragment that makes a div spin infinitely.
.spin {
-webkit-animation: rotation 0.4s linear infinite;
animation: rotation 0.4s linear infinite;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
}
#-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(-180deg); }
100% { -webkit-transform: rotate(-360deg); }
}
#keyframes rotation {
0% { transform: rotate(0deg); }
50% { transform: rotate(-180deg); }
100% { transform: rotate(-360deg); }
}
I want to stop the rotation after a couple of seconds but I don't know what to change. I tried changing infinite to 3 but it stopped and placed my div somewhere else. I need a smooth stop and retains the div original position.
see here jsfiddle
the element was moving because of the translate
code :
.spin {
height:50px;
width:50px;
background:red;
-webkit-animation: rotation 0.4s linear 3;
animation: rotation 0.4s linear 3;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
you should know that the infinite is a value of the animation-iteration-count property which specifies the number of times an animation should be played. so not the seconds.
if you want to stop after N seconds use animation-duration and i suggest you divide the animation declaration into parts, like this :
jsfiddle
for ex you want the spin to rotate for 2 seconds, if you set animation-duration to 2 seconds, the whole animation will take 2 seconds to complete, and that's not what you want. You want your spin to rotate fast for 2 seconds, so you need to calculate the animation-iteration-count like this 2second/animation-duration
say you want 1 rotation to be completed in 0.5s, you set the animation-duration:0.5s and then animation-iteration-count to 2s/0.5 = 4
code :
spin {
height:50px;
width:50px;
background:red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
animation-name:rotation;
animation-delay:0s;
animation-duration:0.5s;
animation-iteration-count:4;
animation-fill-mode:backwards;
}
for more info about animations, read here : CSS3 animation Property
I'm loading an element that has the initial css values of :
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
transition: all 2s ease-in-out;
transform: scale(0,0);
}
I need to change to scale(1, 1) when the element loads in the page and see the transition. Anyone can help?
transition will apply the moment you load the page so that is not an ideal solution in your situation, what you will need is CSS #keyframes where you need to set scale(0,0) to the class and then scale(1,1) for 100% as keyframes will shoot after the page is completely loaded.
Demo (Refactored the code a bit and added animation-fill-mode to prevent the popup from scaling back to 0 so using rev 2)
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
-webkit-animation: bummer 2s;
animation: bummer 2s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; /* Add this so that your modal doesn't
close after the animation completes */
}
#-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1,1);
}
}
#keyframes bummer {
100% {
transform: scale(1,1);
}
}
Here as I explained before, am setting the initial scale of the element to 0,0 and than am animating it to 1,1 using keyframes. The time of the animation can be controlled by tweaking the 2s which is nothing but 2 Seconds.
I am trying to do transform a image using css keyframe
I have something like
#-webkit-keyframes blinkscale {
0% {
transform: scale(1,1)
}
50% {
transform: scale(0.1,0.1)
}
100% {
transform: scale(3,3)
}
}
.addScale {
-webkit-animation: blinkscale 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blinkscale 2s;
-moz-animation-iteration-count: infinite;
-o-animation: blinkscale 2s;
-o-animation-iteration-count: infinite;
}
html
<img src='test.jpg' class='addScale' />
It works if I change my keyframe to
#-webkit-keyframes blinkscale {
0% {background: yellow;}
50% {background: green;}
100% {background: blue;}
}
but not the scale one. Can anyone help me about it? Thanks a lot!
This should do it for you. Just have to make sure the vendor prefixes persist.
CSS:
#-webkit-keyframes blinkscale {
0% {
-webkit-transform: scale(1,1)
}
50% {
-webkit-transform: scale(0.1,0.1)
}
100% {
-webkit-transform: scale(3,3)
}
}
Also to note, you have -moz- and -o- animation set to .addScale so be sure to set keyframes to accommodate all those vendor prefixes and don't forget the standard animation as well.
This link here should be of use Keyframe Animations
Maybe you haven't included the proper browser help, in the webkit keyframes blinkscale, I only see the help for mozilla,.
FIX
-- Just putting cursor: pointer in the keyframe selection fixed the problem. --
-- In the code, the fixes are in comments so you can distinguish between what was and what it--
I have an image object in html that I am animating on a circular path with keyframes. The image has a css cursor:pointer style and an onclick:"document.location='a url';return false;"' functionality. In Firefox and IE, the image animates along its path and maintains its cursor style and onclick functionality when hovering over it. However, in Chrome, I lose the pointer and onclick functionality. I can not click the image to get directed to the url in onclick and I also lose the cursor style which becomes the default arrow. When I take out the animation code, the pointer and onclick functionality work just fine. What is going on here and any suggestions to how I can work around this?
The html:
<img id="imgId" onclick="document.location='a url';return false;" src="img.gif" width="30" height="30"/>
The CSS
#imgId
{
cursor:pointer;
position:absolute;
left:50%;
top:50%;
-webkit-animation: myOrbit 12s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 12s linear infinite; /* Firefox 5-15 */
-o-animation: myOrbit 12s linear infinite; /* Opera 12+ */
animation: myOrbit 12s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
The CCS Animation - located below above
#-webkit-keyframes myOrbit {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); /*cursor:pointer;*/}
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
#-moz-keyframes myOrbit {
from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); /*cursor:pointer*/}
}
#-o-keyframes myOrbit {
from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer*/ }
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
FIX: Just putting cursor:pointer; in the keyframe selection fixed the problem.
-- In the code, the fixes are in comments so you can distinguish between what was and what is --