Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can the "translateZ(0) trick" optimize my Chrismassnow fall animation?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #262824
    SarahLange
    Participant

    Greetings fine people,

    I’m developing a Christmas theme CSS for my Reddit sub and I want it to be as optimized as possible.

    Several forums, including http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css, recommend using “transform: translateZ(0);” to encourage the use of video card GPU rather than the CPU, but I’m not entirely sure where to implement that change in my code.

    Can someone please help me understand if the “translateZ(0) trick” will help me and where that CSS code should go?

    This is my first post to this forum, so sorry for etiquette if I did something wrong.

    Here’s my Christmas snowfall CSS:

    /* CHRISTMAS snow animation code segment START. */

    body:before {
    content: ”;
    background-image: url(https://imgoat.com/uploads/93f65e080a/58819.png), url(https://imgoat.com/uploads/93f65e080a/58820.png), url(https://imgoat.com/uploads/93f65e080a/58821.png);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
    opacity: 1!important;
    animation: snow 12s linear infinite;
    -webkit-animation: snow 12s linear infinite;
    }

    @keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
    100% {background-position: 500px 1000px, 400px 400px, -300px 900px; }
    }

    @-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
    100% {background-position: 500px 1000px, 400px 400px, -300px 900px; }
    }

    #262829
    Beverleyh
    Participant

    Animating background-position can be expensive, especially across the whole screen. I had a situation last year where a fullscreen snowfall (animating background-position like this) caused an annoying white flicker in Firefox. You might want to read this article and experiment with converting it to animating transforms instead (less expensive). http://blog.fofwebdesign.co.uk/37-css-animations-performance-gone-bad-and-how-to-fix-it
    Caveat: This was for digital signage and so wasn’t tested across all browsers or devices, other that the few it displayed on.
    It also depends on what else is going on in your page.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.