I'm using SASS so my CSS syntax looks weird, but anyway, the problem is, that my rotate animation starts well on chrome and firefox, but works only partially on Safari. To be specific, rotateY, scale, skew work normally, but rotate and translateX don't. What is more importat, after I go to another tab and then go back in Safari - suddenly it works as expected.
This is the animation in Safari (before switching tabs):
Safari
Instead of that:
Chrome
Basically, all images appear in the center, and only scale and rotateY animation works, but translate and rotate transitions don't.
To keep it simple this is only the part of the code I use for Safari:
#mixin orbit ($name,$time,$modifier,$skewX,$skewY,$perspective,$rotateY,$startScale,$middleScale){
#at-root (without: media) {
#-webkit-keyframes myOrbit_#{$name} {
from { -webkit-transform: rotate($modifier+deg) translateX(150%) rotate($modifier+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY(0deg) scale($startScale,$startScale); }
50% { -webkit-transform: rotate($modifier+(-180)+deg) translateX(150%) rotate($modifier+180+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY/2+deg) scale($middleScale,$middleScale); }
to { -webkit-transform: rotate($modifier+(-360)+deg) translateX(150%) rotate($modifier+360+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY+deg) scale($startScale,$startScale); }
}
-webkit-animation: myOrbit_#{$name} $time+s linear infinite;
}
I've noticed that when I defined the animation with
-webkit-animation-play-state: paused;
then the "satellites" were positioned properly. So the solution was to start the animation with time offset. In my case this helped:
-webkit-animation-delay: 5ms;
One tricky thing was that I had to put it after other -moz- -o- and "regular" animation properties, otherwise is didn't work, like if it was overwritten.
Related
I'm using a basic CSS loading indicator, based on the one from w3schools. It works great except when using IE 10, where it jumps around.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
Does anyone know of a workaround for IE10?
.loader {
...
border-radius: 50%;
animation: spin 2s linear infinite;
...
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
I made a test with Document mode using developer tools in IE11.
I notice that it shows the result correctly but it also shows a popup to allow block content.
If you allow it then code get break.
with other older versions of IE it not showing any pop up but also not working.
Below is my testing result.
So You can try to make a test without allowing content to check whether it is working with IE10 or not.
I've been investigating and odd behavior when viewing CSS animations on IE11. I've dug up multiple instances where IE11 struggles to digest CSS animations similar to Chrome/Firefox, but, I'd like to produce a solution to this "bug" once and for all.
Demonstration of behavior: http://recordit.co/6urL1s8XgR
As you can see, when the user interacts with the "button", the intended animation is to slide in from the bottom right, scale up and set the opacity to 1. A generic representation of the approach below:
.element {
...
opacity: 1;
animation: animate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#keyframes animate {
from {
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 0, 500px);
}
}
However, on IE11, it complete's the animation lower within the DOM than other browsers, causing the animated element to "jump up" from where it (incorrectly) ended (the animation), to where it needed to finish.
A similar demonstration can be observed at the following url: https://chemonics.com/region/
I've resolved this issue with isolating the problem being the animation-fill-mode property of "forwards" was not present. This was causing the animation to (which only had a 0% keyframe defined for the animation) to end (at 100%) by inheriting the styles of the elements initial state (prior to the animation). With more modern browsers, they "fill in the gaps" whereas with IE11, well, it jumps between the gaps.
https://drafts.csswg.org/css-animations-1/#valdef-animation-fill-mode-forwards
I have a bit of CSS3 animation in my website, and it works fine on Safari but when I run the site in Firefox, it doesn't animate. Here is the code:
.ad{
position:relative;
left:740px;
top:240px;
width:260px;
height:195px;
background-image:url('ad1.png');
animation:myfirst 4s;
-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-delay:2s;
-webkit-animation-duration:0s;
-webkit-animation-fill-mode: forwards;
}
#keyframes myfirst
{
from {background-image:url('ad1.png')}
to {background-image:url('ad2.png')}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-image:url('ad1.png');}
to {background-image:url('ad2.png');}
}
}
Now I've noticed that the issue arises when the site hits the
background-image:url('');
if I were to change these to
background:color;
then it works, but obviously I want to use an image. I've tried adding -moz- prefixes, but it doesn't work. What am I missing? is there a way to make firefox acknowledge
Background-image:url('')
According to the latest working draft of the spec (14 August 2015), background-image is defined as non animatable.
Then, Firefox is just following the spec, and the behavior of browsers which animate background-image is non-standard and shouldn't be relied on.
The ability to interpolate between background images is a pretty new proposal so far, and not well supported in browsers. Firefox doesn't implement it yet.
use #-moz-keyframes
and -moz-animation
to define animation for firefox
My animation uses keyframes, starts on hover and has a long duration.
When I move the mouse out while the animation is still running it stops instantly.
I need the interrupted animation returns to it's original values gradually. (Like 'transform' does).
#keyframes KF_Problem { 100% {transform:scale(2);} }
.Problem:hover { animation:KF_Problem 3s; }
.Problem { transform:scale(1); transition:3s;}
.All_OK:hover { transform:scale(2); transition:3s;}
.All_OK { transform:scale(1); transition:3s;}
1) How can I do that?
2) Why does Firefox "do the work" automatically and all other browsers don't?
Just try the code in http://www.w3schools.com/css/tryit.asp?filename=trycss_default with Firefox and with all other modern browsers to see the difference...
Can Safari 6.0.2 perform a rotation of more than 360 degrees? I have a simple experiment. Try it in Chrome release(not canary, will break, moz also will break) and Safari.
UPDATE:Since I found the solution, I have edited make it work properly in Chrome and Safari, but I still providing a improper version and proper version for compare.(note: Safari version is 6.0.2 at this time). BTW, I test in MAC only, not yet test in Windows
Improper version : Fail in Safari
Proper version : Simple Experiment
You cannot have multiple transform style at the same time when transitting , example
.chun {
-webkit-transform: scale(1.0); /*we want rotate, so remove this*/
transform: scale(1.0); /*we want rotate, so remove this*/
-webkit-transition: all .8s ease;
transition: all .8s ease;
}
.chun:hover {
-webkit-transform: rotate(-900deg); /*we want this to be rotate few cycle*/
transform: rotate(-900deg);
}
cannot have scale on normal state and rotate for hovering state.
This definetely is a bug(or something else) in safari, because Chrome can handle it properly.