Why certain css does not work on IE?
For Example: on this page, it work on chrome perfectly and it does not work on IE.
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html
from the tutorial on this page:
http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
I added some code on the css:
inside .ball:
{
animation-duration:1s;
animation-name:spinoff;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
new key frames:
#keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
Tested on IE11 and it is not working.
I am very confuse why it does not work on IE11...
UPDATE
It was my mistake that copy and paste the thing without realizing the mistake.
I had solved the mistake through the code below:
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Thanks for raptor to pointing out my mistake.
Try the follow to give it support to other browsers and make it work in IE
-moz Mozilla
-webkit Chrome and Safari
-o- Opera
-ms Internet Explorer
and obviously without it for older versions or non famous ones
Related
I have a Safari issue (both desktop and iOS) with a simple CSS flip animation. I've checked all similar posts and answers but none solved my problem and I need another take on this.
In short, I'm making a vertical blind overlay flip effect to demonstrate car window tints. Simplified it looks like this:
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
The CSS looks like this
.blind {
position:relative;
width:calc(100% / 5);
height:500px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.blind.flip-animation {
animation:flip 1s ease;
}
.blind:nth-child(2) { animation-delay:50ms; }
.blind:nth-child(3) { animation-delay:100ms; }
.blind:nth-child(4) { animation-delay:150ms; }
.blind:nth-child(5) { animation-delay:200ms; }
#keyframes flip {
0% {
-webkit-transform:perspective(800px) rotateY(0);
transform:perspective(800px) rotateY(0);
}
100% {
-webkit-transform:perspective(800px) rotateY(360deg);
transform:perspective(800px) rotateY(360deg);
}
}
The .flip-animation class is triggered by an IntersectionObserver when the container is in view but that's unrelated.
Different approaches I've tried: Keyframes with only to:transform:perspective(800px) rotate(1turn);, I've "experimented" with z-index, adding a separate perspective:800px, with and without the -webkit- prefix, added backface-visibility:hidden; and transform-style:preserve-3d; inside the animation too (also with -webkit- prefix). All of the things I try doesn't make a difference in Chrome (it looks good no matter what) but it flickers and behaves incorrectly in Safari. It's like the blinds flip behind the opaque background (container) when "below/behind" the surface so to speak. Are there other approaches to this that I'm missing?
See these images for comparison between Chrome and Safari:
Chrome
Safari
I think the issue here is with the
backface-visibility: hidden;
It's not being supported in ios and in safari.
In your code just replace the code with
-webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
visibility: visible;
backface-visibility: hidden;
I hope this will help you.
I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip
and this is the class:
.flip-horizontal-bottom {
-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/**
* ----------------------------------------
* animation flip-horizontal-bottom
* ----------------------------------------
*/
#-webkit-keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
#keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?
From their "How to" notes:
Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.
Besides, they don't provide the complete code as far as I can tell. They have a perspective:500px on their animation stage wrapper (in the demo) which makes it all work, and I don't see it mentioned anywhere in the download example code.
Even after you add it, I doubt it will work in IE, as it lacks support for transform-style:preserve-3d, as pointed out in the answers here.
I made a simple animation using CSS keyframes. But it does not work in IE and Firefox. 'background-image' is not displaying in both browsers. How can I make this work in both browsers without using background-position?
#keyframes back{
0% {
background-image: url('../images/gandhi.jpg');
transform: scale(1.5);
}
50% {
background-image: url('../images/cv.jpg');
}
100% {
background-image: url('../images/apj.jpg');
transform: scale(1);
}
}
I'm trying to animate a SVG graphic with keyframes, but my animation doesn't work correctly in Safari. It's fine in Chrome and Firefox, but Safari doesn't seem to render it the way I'd like it to. I'm using the -webkit- vendor prefix on my CSS properties, but that doesn't seem to help. I have no idea what could be causing such a thing.
Here is a Fiddle link to my code.
Here is what the problem looks like:
Here is a snippet of one of the keyframes:
#-webkit-keyframes dropOne {
0%, 100% {
opacity: 0;
}
0% {
-webkit-transform: translate(6px, -6px);
}
25%, 50%, 75% {
opacity: 1;
}
100% {
-webkit-transform: translate(0px, 0px);
}
}
now that firefox 4 is out I want to get some of my sites that have a chrome animation, working in firefox. I have got all the simple animations working in firefox (rotate, movement etc), but don't know if it's possible to do keyframe animation like it is in chrome(webkit)?
An example of a chrome animation is below
#-webkit-keyframes "sway" {
0% { -webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(-2deg); }
50% {-webkit-transform: rotate(2deg); }
75% {-webkit-transform: rotate(-2deg); }
100% { -webkit-transform: rotate(2deg); }}
I animate this with "-webkit-animation-name: "sway" " . Simply changing all prefixes to moz doesn't help. Any info would be great.
Many thanks
Nick
Firefox does not yet support CSS Animations, follow bug 435442 to track the development progress. The bug is fairly active so I'd guess they're trying to get this into the next release.
As robertc said, there are no css animations in Firefox yet, only transitions. If your animation is just a shaking box like you have in your css, you would achieve it easily chaining the transitions with a little bit of javascript...
Your css:
#yourdiv {
-moz-transition: all 200ms ease;
}
Your Javascript:
//onload body
var element = document.getElementById("yourdiv");
element.style.MozTransform = "rotate(2deg)";
element.addEventListener("transitionend", function(){
var rotate = (element.style.MozTransform == "rotate(2deg)") ? "rotate(-2deg)" : "rotate(2deg)";
element.style.MozTransform = rotate;
}, false);
I haven't actually tested it in Firefox, but here's a working version for webkit:
http://jsfiddle.net/J6SMb/