Pinegrow Community Support Forum

Snow in Pineland - how CSS Prefixers, dont always work


#1

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!
:frowning:

NIce background picture, but alas, NO FALLING SNOW!

checked in (an older version) of Google Chrome - FALLING SNOW! :slight_smile:

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

css3-transform-prefixers-firefox-!

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…

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 :slight_smile:

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.

:slight_smile:

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?


#2

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

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

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

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.


#3

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


#4

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!


#5

Here are some realistic “snow” effects from Codepen.

https://codepen.io/tag/snow/#


#6

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

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: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, 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…


#7

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


#8

@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 ?

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

that “Jump” Terminal commandJ 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!)


#9

Nice! they Printed my feedback comment :slight_smile:

I joined disqus.com , just so I could leave that feedback for them.