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
Related
Here is a fiddle showing what's going on here. I'm trying to create an effect like that of focusing a lens in and out, but this will happen in Chrome (technically I've only tried Chromium, but they're essentially the same) even for a straightforward transition. After the animation, the content temporarily disappears and then reappears.
Does anyone know a fix for this? (Please verify it with the Fiddle in Chrome; I've tried multiple promising solutions, and all have failed.)
.blur-animation {
animation-name: focus;
animation-duration: 1.5s;
animation-fill-mode: both;
}
#keyframes focus {
0% {
filter: blur(10px);
}
100% {
filter: blur(0px);
}
}
p {
font-size: 4em;
}
<div class="blur-animation">
<p>Hello, world</p>
</div>
Update
Sorry guys, I should have tried this on Chrome rather than Chromium; the issue seems to be unique to Chromium and Android's Google app (not Chrome on Android). I don't expect a lot of people to be using Chromium, so it's not a big deal, although I am curious what caused it there.
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.
I have a CSS animation inside of an application we're working on that was working before we started upgrading it to Windows 8.1. It is a relatively simple rotation transform that intended to make an image spin. The below is our CSS which seems valid and runs fine in IE11 with a test page.
.spinner img {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
It turned out nothing was wrong with the animation declaration itself, as expected. We had just wrapped the keyframes definition inside of a media query. Apparently, even though the media query was valid and was being correctly applied, neither IE11 nor Windows 8.1 would render the animation.
Long story short, moving the keyframes definition outside of the media query resolved the issue.
I have following animation. It works fine in Chrome but does not work in safari. Although if I remove reverse it starts working in Safari.
Is it possible that animation starts working in Safari in reverse.
OR
It keeps working in reverse in chrome but normal in Safari.
JSFIDDLE
.d{
width:300px;
height:300px;
background:url(https://www.google.com/images/srpr/chrome_ntp_white_logo2.png) repeat-x;
animation:mymove 25s infinite linear reverse;
-webkit-animation:mymove 25s infinite linear reverse; /* Safari and Chrome */
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
0%{background-position:0 0}
100%{background-position:999px 0;}
}
So i removed reverse since its not supported by Safari and set background-position to -999px instead of 999px;
I am trying to get a cross browser compatible blur animation effect, although I appear to be failing miserably!
I am using the following:
.image-container img.animate-me {
-webkit-animation: focus 4s;
-moz-animation: focus 4s;
-ms-animation: focus 4s;
-o-animation: focus 4s;
animation: focus 4s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes focus {
from {
filter: url('blur.svg#blur');
filter: progid:DXImageTransform.Microsoft.blur(PixelRadius='10');
filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
}
to {
filter: url('focus.svg#focus');
filter: none;
filter:progid:DXImageTransform.Microsoft.blur(PixelRadius='0');
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
}
#-webkit-keyframes focus {
from {
-webkit-filter: blur(10px);
}
to {
-webkit-filter: blur(0px);
}
}
#-moz-keyframes focus {
from {
filter: url('blur.svg#blur');
}
to {
filter: url('focus.svg#focus');
}
}
Now there are a number of things which must be pointed out.
The prefixes thing has just got messy, in fact I have no idea what half of the first #keyframes rule is doing now! Anyone care to tell me which rules are irrelevant or useless?
Chrome (and the whole #-webkit-keyframes rule) works perfectly... Good old, no-nonsense, Microsoft-less Chrome. We never doubted it for a second!
Internet Explorer is as usual playing dumb and acting like it has never heard the phrase CSS3 in its life. I'd like this to work as far back as IE8 so I can't blame it, but I've been testing in IE10 and I expected to at least see some kind of reaction.
filter: url('blur.svg#blur'); is as follows:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>
This blurs the image when added as a CSS rule, but appears to do nothing within a #keyframe animation. The focus version sets stdDeviation to 10.
Any help is appreciated!
Always put unprefixed versions last! Firefox supports unprefixed keyframes, but is going to use whichever you write last (in your case, the prefixed keyframes).
WebKit browsers are the only ones that currently support CSS filters (prefixed, of course).
Firefox only supports the SVG filter equivalents.
I haven't heard of -o-filter or -ms-filter ever working (though I have seen them in demos that were meant to be future-proof).
Old IE filters don't work in IE10. And keyframe animations don't work in other versions of IE but IE10. So IE filters (recognized only by IE versions older than 10, but not by IE10) inside keyframes (recognized only by IE10) are useless.
As far as I've played with this, I haven't found a way to make the SVG filter equivalents work with keyframe animations.
So as far as I know, you can only make such an animation work in WebKit.