I have a sprite that I've made and it works in Chrome but not Firefox [FF].
.hand {
width: 600px;
height: 529.5px;
margin: 2% auto;
background: url('hand2.png') center top;
animation: play 3s steps(24) infinite;
}
#keyframes play {
100% { background-position: 0px -50840px; }
}
And then doing:
<div class="hand"></div>
works in Chrome to show the animation. What does Firefox need from me? Thanks.
I did a little research (CSS-Tricks and w3schools), and for browser support you need to specify the browsers with prefixes:
-moz-animation: ... //For FIREFOX
-webkit-animation: ... //For Safari and Chrome (Opera versions later than 15.0)
-o-animation: ... //For Opera versions lower than 15.0 and higher than 12.0
In the keyframes you also use the prefixes:
#-moz-keyframes *animation name* { ...
#-webkit-keyframes *animation name* { ...
#-o-keyframes *animation name* { ...
Also is a good idea to add the animation: and #keyframes *animation name* { without prefixes.
Hope this answer solve your problem.
Related
I found the animation below for a screensaver I'd like to use for digital signage. Problem is, it wont work with IE11, the only browser supported on the target system.
What needs to be changed to make it work? I can't find on caniuse.com what feature isn't working in IE.
Codepen: https://codepen.io/scottkellum/pen/BoZvjR
IE11 Debug Link: https://s.codepen.io/scottkellum/debug/BoZvjR
Code with SCSS removed:
body {
margin: 0;
}
img, div {
width: 100px;
height: 100px;
}
.x {
animation: x 13s linear infinite alternate;
}
.y {
animation: y 7s linear infinite alternate;
}
#keyframes x {
100% {
transform: translateX( calc(100vw - 100px) );
}
}
#keyframes y {
100% {
transform: translateY( calc(100vh - 100px) );
}
}
<div class="x">
<img class="y" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" alt="codepen" />
</div>
If it isn't possible to use that exact way, is there another way to bounce an image around the screen?
EDIT: I can't finde the solution in the proposed answer of CSS3 animation is not working in IE11 but works in other browsers: There is no running statement in the animation, I tried adding the overflow:visible and the containers don't change size.
I found it out, I looked up every CSS3 function on icanuse.com again, and it turns out, calc() doesn't work inside transform in IE10, IE11, and Edge < 14.
I can live with the workaround of setting the screen dimensions manually (it's for digital signage and the screen will always be shown on full HD)
I have a CSS3 animation I'm working on for my website in which the stroke-dashoffset of an SVG is animated. It works fine on Chrome and Opera but doesn't work on Safari or Firefox. On Safari, the text shows up but does not animate. On Firefox, the text doesn't show up at all. It's most important to me to get Safari working so that it shows up correctly on iOS.
I've tried a bunch of stuff already including changing the units, using percentage keyframes rather than to and from, adding and removing prefixes, not using shorthand for the animation properties, changing various properties, trying different webkit prefixes, double checking that I'm not animating stroke-dashoffset using negative numbers, etc and nothing has worked so far. I've looked at every article I could find online and haven't found a solution. I'm hoping it's something simple that I'm overlooking or that there is an easy workaround but I fear that it's a webkit bug.
I've put a JSfiddle below that replicates the issue in Safari and Firefox and works correctly in Chrome:
https://jsfiddle.net/lystroid/2a97ntf1/58/
Here's is the relevant HTML and CSS:
HTML
<svg width="80vw" height="150vw">
<text y = "500px" fill="none" stroke="#e2e2e2" stroke-width="0.5">ABCDE</text>
</svg>
CSS
text {
font-family:arial;
text-align: center;
color: #e2e2e2;
font-size: 23vw;
line-height: 0;
stroke-dasharray: 98vw;
stroke-dashoffset: 98vw;
animation: draw 7s ease 1 forwards;
-webkit-animation: draw 7s ease 1 forwards;
-moz-animation: draw 7s ease 1 forwards;
-webkit-animation: draw 7s ease 1 forwards;
-o-animation: draw 7s ease 1 forwards;
-ms-animation: draw 7s ease 1 forwards;
}
#-webkit-keyframes draw {
from {
stroke-dashoffset: 98vw;
}
to {
stroke-dashoffset: 0vw;
}
}
#keyframes draw {
from {
stroke-dashoffset: 98vw;
}
to {
stroke-dashoffset: 0vw;
}
}
I haven't tested the animation in Internet Explorer or Edge.
Thanks for reading!
EDIT: I should clarify that there are two animations on the page. One of them is for the caption, which works well on all browsers. The animation that I'm referring to in this question is the animation on the SVG text that says 'ABCDE'
I am making a site that uses some CSS3 keyframes animations.
The guides I have seen suggest using separate code for each browser specifying which code is for what browser as I go along.
eg. This guide which suggests:
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
And this one Which suggests slightly different grouping but essentially the same thing.
However I have seen many articles saying that browser detection is poor practice in modern webpages.
This page (same site as above)
W3C agrees but feels an exception could be made for browser prefixes in css.
Is it possible to use keyframes using an approach that just queries the support of the feature rather than specify a browser?
However I have seen many articles saying that browser detection is poor practice in modern webpages.
Yes, browser detection is not good practice as it is unreliable and likely to break in the (near) future.
However, what you are doing here is not "browser detection" as described in that article. You are using vender prefixes.
Vender prefixes are OK, the accepted way of doing this (implementing a feature that is still considered "draft"). It is the only way of doing this.
"The problem" is that browsers don't necessarily support the "standard" way of doing this yet, ie. without the vendor prefix. Probably because they implemented this before it was a standard; before the "final" implementation has been agreed. In the meantime they implement how they think it will work and use a vendor prefix. The vendor prefix'd rule might not work the same way as the final "standard".
So, the vendor prefix'd version will always (or for a while yet) work in the browser it is designed for. The browser ignores all other vendor prefixed rules (in CSS, if a browser does not understand something it should ignore it). When the browser does implement the standard and starts to support the non-vendor-prefixed rule then that is the rule that will take priority.
I am building an transition with :after css and content in it using below code and Its working fine on chrome but not working on firefox 26.0. Why ?
Where i did wrong? I could not understand it ?
Help me out
<html>
<head>
<style type="text/css">
.teacherheading {
display: inline-block;
font-size:20px;
}
.teacherheading::after{content:'educational';
animation: 8s ease-out 2s pulsate;
animation-iteration-count: infinite;
-webkit-animation: 8s ease-out 2s pulsate;
-webkit-animation-iteration-count: infinite;
-moz-animation: 8s ease-out 2s pulsate;
-moz-animation-iteration-count: infinite;
-o-animation: 8s ease-out 2s pulsate;
-o-animation-iteration-count: infinite;
}
#-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-webkit-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-moz-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-o-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
</style>
<body>
<div style="font-size:20px">
Start your <div class="teacherheading"></div> institution
</div>
</body>
</html>
The content property is not meant to be animatable.
Chrome seems to allow this (I do not know why) but Firefox is somewhat stricter.
Basically FF is following the intended behaviour, Chrome is not.
Content # MDN
From Chris Coyier at CSS-Tricks
In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.
It might be a handy trick in some distant future or it might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.
If you need to change content in a cross-browser friendly way
Use JavaScript.
I am trying to iterate over colours (or background images), but it does not seem to work. I tried the following, but it only iterates one time and does not continue.
.landing-background {
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
0% {background-color:red; }
25% {background-color:yellow; }
50% {background-color:blue; }
75% {background-color:green; }
100% {background-color:red; }
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; }
25% {background-color:yellow; }
50% {background-color:blue; }
75% {background-color:green; }
100% {background-color:red; }
}
You are probably using another browser than Internet Explorer.
Try adding:
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
Edit:
Visit Can I Use: Css-Animation to see which browsers support css animations (prefixed). Every browser nowadays supports this without prefix, though not everybody may have updated their browser. It's probably safe to remove the prefixes entirely mid-2017.