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;
Related
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
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
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 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.
I added a fade-in effect for the logo on a web site:
#logo img {
opacity: 0;
-moz-transition: opacity 5s; /* Firefox 4 */
-webkit-transition: opacity 5s; /* Safari and Chrome */
-o-transition: opacity 5s;
transition: opacity 5s;
}
and
<div id="logo"><p><img src="img/logo.png" ... onload="this.style.opacity='1';" /></p></div>
At first view, it seems to work greatly. But on the second (third, ...) page, the logo is just displayed, it does not fade-in in IE9 or FireFox 19 or Opera 12 - only in Safari 5 and Chrome 25, the fade-in effect is available for every page.
I hardly ever do web design, and that's just a nice to have feature I stumbled upon while playing with CSS. I think it is not appropriate to start learning how to use a big library like jQuery which I would use less than once a year.
Is there a simple method to make it work with the other browsers on all pages?
Based on your comments this might work:
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
If you want support for IE you should use jQuery.