Happy New Year!
to celebrate, I thought I’d get back to some Festive Web Work and thought this would be nice to learn about CSS3 animations.
I fired the URL up in Pinegrow (2.951) to see the code and play with it, LOVELY.
IN PineGrow, its snowing in Pineland. Very Atmospheric.
I then hit CMD+B to open it up in my Browser of choice, Firefox (older, v48 -I’m on Mac OS X 10.6.8 -update limits reached with many things)
and… no dice!
NIce background picture, but alas, NO FALLING SNOW!
checked in (an older version) of Google Chrome - FALLING SNOW! 
I was wondering if it was due to my browser being older,
So, I googled like you do, and found this
nope! it wasn’t browser age, but rather just the fact that it was Firefox,but, I couldn’t QUITE understand the answer,
but it looks like it was something to do with Transform
so google some more and
HEY PRESTO! -I worked it out.
this helped - just by the fact of the highlighted/greyed out icons at the top
and the 2 different listed methods -but one of which, still uses * moz* which the prior article says is deprecated.
Looking at the highlighted icons, it appears as if -webkit-transform, only applies to safari and chrome…
but I have it under the @moz section -which I might also not need in versions of firefox after 15
!
which I found on
http://help.dottoro.com/lcebdggm.php
and I finally !looked up
TRANSFORM
in the table of THIS HELPFUL TOOL showing me what the correct line of code for TRANSFORM in Firefox should be…
Lo!
I find that it should be
.example {
-webkit-transform: rotate(30deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 /
-ms-transform: rotate(30deg); / IE 9 /
transform: rotate(30deg); / IE 10, Fx 16+, Op 12.1+ */
the bit I’m interested in is the last bit, for fx 16+ (which I guess is Firefox, versions greater than 16)
transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */
So, lets ditch the * -webkit- * prefixer of the transform animation styling.
what happens?
WOO HOO!! SUCCESS! That is what happens
So, this SIte’s downloaded files have the wrong CSS transform information for the FireFox browser.
their css file says
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
when, for firefox it should just be
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
transform: translate(150px, 800px) rotateZ(360deg);
}
As shown by the above 2 screen captures in Firefox Dev Tools. -moz- is deprecated, as the very first link explained, this isnt actually a problem
but also, firefox doesn’t understand the *-webkit- * instruction when combined with * transform *
-and this is what stops the animation from working.
So remove them and it can indeed snow in PineLand!
Less is, indeed, more, …sometimes.
SO, it is now snowing in both PineLand AND FoxLand.
This is good.
P.S. as an aside, if you download the files from premium coding to try this in firefox, just remove the first two -webkit- prefixes and see what happens… there must be quite an up draft!
also, WHY THE MANY SPAN tags?
I get that each one is a snowflake. but, is there not a more elegant solution?
