No replies
SarahLange
SarahLange's picture
Offline
newbie
Last seen: 3 weeks 6 days ago
Timezone: GMT+10.5
Joined: 2017-11-20
Posts: 1
Points: 2

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 this one, 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(Innocent trick" will help me and where that CSS code should go?

Here's my Christmas snowfall CSS:

/* CHRISTMAS snow animation code segment START. */
 
body:before {
    content: '';
    background-image: url(<a href="https://imgoat.com/uploads/93f65e080a/58819.png" rel="nofollow">https://imgoat.com/uploads/93f65e080a/58819.png</a>), url(<a href="https://imgoat.com/uploads/93f65e080a/58820.png" rel="nofollow">https://imgoat.com/uploads/93f65e080a/58820.png</a>), url(<a href="https://imgoat.com/uploads/93f65e080a/58821.png" rel="nofollow">https://imgoat.com/uploads/93f65e080a/58821.png</a>);
    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; }
}