Forums

Give help. Get help.

  • # November 20, 2017 at 3:23 pm

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

    # November 20, 2017 at 11:08 pm

    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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag