# Snow in Pineland - how CSS Prefixers, dont always work

**URL:** <https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475>\
**Category:** Styling (CSS)\
**Created:** [January 3, 2018, 5:49pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475 "2018-01-03T17:49:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 3, 2018, 5:49pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/1 "2018-01-03T17:49:15Z")

</div>

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.

> **[CSS3 Tricks: Falling Snow Animation with CSS only - PremiumCoding](https://premiumcoding.com/css3-tricks-falling-snow-css/)**
>
> CSS3 animations brought a whole new level of possibilities into the CSS world. So inspired by the current development in Game of Thrones (winter is

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

> <https://stackoverflow.com/questions/37942642/css-animation-doesnt-work-in-mozilla>

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

![css3-transform-prefixers-firefox-](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/890c69f268e3f78fc8296280bc4379a639b2fc72.jpg)!

which I found on  
[http://help.dottoro.com/lcebdggm.php](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…

 ![css3-transform-prefixers-firefox-transform-correct-](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/d3a59c541de8f69fd579a9fe2d67881584e60417.jpg)

[http://shouldiprefix.com/](http://shouldiprefix.com/)

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);  
}

 ![css3-transform-prefixers-firefox-falling_snow_no-](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/a2f66f3cbf1b1b455c7db2516568fab9e1a06249.jpg)!

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);  
}

 ![css3-transform-prefixers-firefox-falling_snow_yes-](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/0560f33bb588553bcfcef1dba4b8f5184c93f458.jpg)!

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?

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [January 3, 2018, 9:54pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/2 "2018-01-03T21:54:38Z")

</div>

> [@schpengle](#):
>
> it **wasn’t browser age** , but rather just the fact that it was Firefox

The demo example for that tutorial works fine on all newer browser versions ( Chrome / Firefox / Safari / Etc. )

> [@schpengle](#):
>
> I’m on Mac OS X 10.6.8

Regarding OS X 10.6.8 , at least you have a good test machine for backwards compatibility testing. 😀

> [@schpengle](#):
>
> Why the many SPAN tags? I get that each one is a snowflake. but, is there not a more elegant solution?

You can find various other approaches, here is a good written tutorial.

> **[The Falling Snow Effect](https://www.kirupa.com/html5/the_falling_snow_effect.htm)**
>
> Easily add some sweet falling snow to your page and learn all about how this effect works.

Kirupa, the creator of that site has nice detailed clean tutorials ( that you may find useful ) and has written some corresponding books as well. He expresses things in simple terms that are easy to follow, and gives the “why and how” regarding the approaches and techniques.

Maybe it will prove useful to your efforts.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 3, 2018, 11:51pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/3 "2018-01-03T23:51:56Z")

</div>

Yep! ya right.

Interesting, Ive just sparked up El Capitan version and running a later firefox (v57) and  
it works.!

SO, for a while, things didnt work in firefox, you needed prefixes.  
then for another while, the prefixes actually stopped it working (if incorrectly assigned as it was - webkit for firefox, or with a moz involved)

then… it didnt matter anymore, and it works again.  
Nice!

I think. well there went a few hours/over 2 days of my life working that out and writing the article. but, I enjoyed that. the first creative thing ive done for a while.  
Now, lets check kirupa out.

Thanks

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 3, 2018, 11:54pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/4 "2018-01-03T23:54:54Z")

</div>

wow! that is some IN DEPTH snowflake animation goodness tutorial!  
awesome.  
I’m not sure starting to read it at midnight is a good idea. so I shall get back to it!

---

<div class="post-metadata">

**Author:** ![vrooney](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/vrooney/32/769_2.png) [@vrooney](https://forum.pinegrow.com/u/vrooney)\
**Post date:** [January 6, 2018, 2:49am UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/5 "2018-01-06T02:49:57Z")

</div>

Here are some realistic “snow” effects from Codepen.

[https://codepen.io/tag/snow/#](https://codepen.io/tag/snow/#)

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 6, 2018, 5:44pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/6 "2018-01-06T17:44:16Z")

</div>

Nice collection, thanks-looks like we’ve started a theme 🙂

I really like Precipitate in 3d space , (the 3rd one), as far as _realistic snow_ goes,  
but the the 1st one CSS3 Snow, is very… Pretty 🙂slight\_smile:

Oddly, the one labelled _Snow Fall_ -4th one…well nothing going on there!  
and when I checked it out, there is no html content,  
and I cant view the images either, at [imageshack.us](http://imageshack.us), it just gives me a _login page_, so not sure how the pen is supposed to access them either.

in other news, today it was cold here and frosty start but… no snow.  
bum.

ps, its quite alarming, how much css animations gun up the cooing fans!  
It would also appear that the more _random_ an animation is, the harder the _virtual world_ has to work (and spin up fans to create\*

which would seem to be the opposite of how the _real_ world works.  
or is it?  
is there actually more energy spent on the creation of random things in the world/universe than is spent on ordering things?

mmmm… do we have a #Philosophy-MetaPhysics-and-Mysticism channel here on the pinegrow channel?

Nope?..welll…

---

<div class="post-metadata">

**Author:** ![vrooney](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/vrooney/32/769_2.png) [@vrooney](https://forum.pinegrow.com/u/vrooney)\
**Post date:** [January 6, 2018, 6:20pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/7 "2018-01-06T18:20:03Z")

</div>

Hey Buddy,

Yea I posted that when I saw your post in case you were looking for  
other options. I like the realistic snow as opposed to the one that  
looks like “flakes”. It should have dept of field and move chaotically.

I think the one that is missing is probably because the person who  
posted it pulled it down. CodePen is a public “forum” with external  
links. They probably got hit with too much traffic on their site costing  
them $$$ so they pulled it.

Here in VT it’s -2 right now. Suppose to be -20’s tomorrow. Had a little  
snow over the 8" we received from the “Snow Bomb” all over the news. It  
was a nothing burger. Typical VT winter. I’ve skied at -35 so no big  
deal. Prefer the cold to the heat and humidity.

Hope all is well with you. Wishing you a fine, safe and healthy New Year.

Be well,

Vince

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 6, 2018, 10:00pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/8 "2018-01-06T22:00:39Z")

</div>

@vrooney wow, -35… skiing?  
probably better than fishing at -35 anyway.

and _dry_ cold is ok.  
ive been out, back in the day in Central Europe, wandering about at -17C which was cold but ok, no probs.

Back here, in wales, where it is constantly damp, +2 and you think your fingers are going to fall off

and VT?  
that “Vermont”? East coast USA?

as in  
[https://www.timeanddate.com/worldclock/usa/vermont](https://www.timeanddate.com/worldclock/usa/vermont) ?

and thanks for some of the other links you’ve posted, previously too. I’ve used a few of them now.

that “Jump” Terminal command_J_ shortcut in terminal is pretty awesome, and something similar, if you like that sort of thing this is a little similar(well, different but, damned useful)

How to run terminal commands from any app (or selected text)  
(for mac - kind of sorry… kind of … well, very sorry, if your running windows. it kills me!)

> **[run Terminal commands from any app](https://applehelpwriter.com/2014/05/09/run-terminal-commands-from-any-app/)**
>
> In this post I’m going to show you how you can select a piece of text in any app and have it run in Terminal simply by hitting a hotkey. The trick is especially useful for running commands yo…

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 6, 2018, 11:59pm UTC](https://forum.pinegrow.com/t/snow-in-pineland-how-css-prefixers-dont-always-work/1475/9 "2018-01-06T23:59:38Z")

</div>

Nice! they Printed my feedback comment 🙂

> **[CSS3 Tricks: Falling Snow Animation with CSS only - PremiumCoding](https://premiumcoding.com/css3-tricks-falling-snow-css/#comment-3690083091)**
>
> CSS3 animations brought a whole new level of possibilities into the CSS world. So inspired by the current development in Game of Thrones (winter is

I joined [disqus.com](http://disqus.com) , just so I could leave that feedback for them.