Im trying to get this code to work in IE9 and Firefox. It works perfectly fine in chrome
http://jsfiddle.net/THSdP/1/
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
#rsSpinner{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 40s;
}
The code only shows the code for Chrome, and it works in there, but I cant seem to get the other prefix sets to work in IE and Firefox.
You haven't defined the animation function for firefox, only for webkit and ms. That's why it's not working in Firefox and IE.
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
Another advice is to put the prefix free at the bottom of the definition.
Here is the working code: http://jsfiddle.net/THSdP/5/
Add this for IE
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
Related
I'm working on rotating a sprite 360 degrees around a certain point using the css property translateX. The sprite rotates around the point as expected, but I's like to know how I can obtain the 'left' and 'top' values whilst the sprite is rotating. Is using translateX the correct way to go about this or is there a much better solution?
#target {
position: absolute;
top: 292px;
left: 291px;
-webkit-animation: orbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: orbit 4s linear infinite; /* Firefox 5-15 */
-o-animation: orbit 4s linear infinite; /* Opera 12+ */
animation: orbit 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#-webkit-keyframes orbit {
from { -webkit-transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
#-moz-keyframes orbit {
from { -moz-transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
#-o-keyframes orbit {
from { -o-transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
#keyframes orbit {
from { transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
Just discovered a function called position() within jquery to obtain the left and top positions. Works for me. Wanted to share this in case someone else is in this situation.
$("#myDIV").position().left
$("#myDIV").position().top
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.
For example I make scale from 1 to 2, and I want to make it hold when it gets to scale 2, for example while the user hovers some image it is scaled, is that possible?
#-webkit-keyframes scale {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
to {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
#keyframes scale {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
to {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
div.item:hover
{
animation: scale 2s;
-webkit-animation: scale 2s;
}
use animation-fill-mode: forwards or both
div.item:hover
{
animation: scale 2s forwards;
-webkit-animation: scale 2s forwards;
}
You can use the transition property instead of the keyframes animation.
div.item {
transform: scale(1);
transition: all .2s;
}
div.item:hover {
transform: scale(1.5);
}
See this fiddle for an example: http://jsfiddle.net/8eHHL/
Use this:
.div.item { animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for other modern browsers */
}
Use this.I think it will work.
I give only webkit(Crome) version you need to write for all.
#-webkit-keyframes scale{
0% {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
100% {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
div.item:hover
{
-webkit-animation: scale 2s;
}
I'm afraid it's impossible to keep result of animation in your case. You bind animation on hover and trying to keep it when user blurs mouse from your element. But there is ability to keep animaton on click. click event is done with :target
I found this useful link which explains rotation in IE9
CSS3 transform: rotate; in IE9
unfortunately using either of these does not work
.mark.festival:hover{
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
I have seen in various places that both these rules work for IE9 though mostly I am reading that you need the -ms prefix
http://www.wanderfest.com is the link if you want to check it
the site is not in quirks mode as suggested here
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2567faea-fcea-4ddf-9116-1e2c703ee2e7/
That support on caniuse.com has a caveat: you need to use the MS's filter: This translator will convert CSS3 transforms to MS matrices for filters: http://www.useragentman.com/IETransformsTranslator/
Example:
#transformedObject {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand');
}
The following CSS works fine in Webkit. Haven't checked it in Opera, but I know it's not working in Firefox. Can anybody tell me why?
The correct classes are definitely getting applied to my HTML (inspected it with Firebug, and I do see the -moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot property on .arrow).
This also doesn't work in IE9, although I did originally have -ms-animation:... and -ms-transform:.... I thought it was supposed to work in IE9, but when it didn't I just assumed that IE didn't support these yet. However, now that it's not working in Firefox, maybe something else is going on.
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow {
-webkit-animation: arrowRotateDot 500ms forwards;
-moz-animation: arrowRotateDot 500ms forwards;
-o-animation: arrowRotateDot 500ms forwards;
animation: arrowRotateDot 500ms forwards;
}
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow {
-webkit-animation: arrowRotateF2 500ms forwards;
-moz-animation: arrowRotateF2 500ms forwards;
-o-animation: arrowRotateF2 500ms forwards;
animation: arrowRotateF2 500ms forwards;
}
#-webkit-keyframes arrowRotateDot {
100% {
left:-18px; top:182px;
-moz-transform: scale(1) rotate(-30deg);
-webkit-transform: scale(1) rotate(-30deg);
-o-transform: scale(1) rotate(-30deg);
transform: scale(1) rotate(-30deg);
}
}
#-webkit-keyframes arrowRotateF2 {
0% {
left:-18px; top:182px;
-moz-transform: scale(1) rotate(-30deg);
-webkit-transform: scale(1) rotate(-30deg);
-o-transform: scale(1) rotate(-30deg);
transform: scale(1) rotate(-30deg);
}
100% {
left:115px; top:257px;
-moz-transform: scale(1) rotate(-90deg);
-webkit-transform: scale(1) rotate(-90deg);
-o-transform: scale(1) rotate(-90deg);
transform: scale(1) rotate(-90deg);
}
}
Your animations are not working in Firefox because you are using #-webkit-keyframes, which only applies to Webkit browsers, i.e. Chrome and Safari. The (somewhat) cross-browser way to do animation keyframes is:
#keyframes animationName {
/* animation rules */
}
#-moz-keyframes animationName {
/* -moz-animation rules */
}
#-webkit-keyframes animationName {
/* -webkit-animation rules */
}
Opera and Internet Explorer do not currently support the #keyframes rule.
Skyline is correct. Firefox does not support this, so you will need additional code to get the same or similar effects if they exist without webkit.
Also, here is some additional information that might help you with your code or help you in deciding where to go from this point with your code if adding additional code is not an option (I ended up changing how I code to keep from being overwhelmed with code):
http://caniuse.com/#
http://www.quirksmode.org/webkit.html