Background animation laggy on android phone


#1

Hi I am using the following code to some div background animation, but it’s very laggy on my high-end android phone, any idea?

@keyframes background_color_1 {
0% {background-color: #2BACE2;}
50% {background-color: transparent;}
100% {background-color: #2BACE2;}
}

#board_1 #grid_46 {
background-image: url("…/img/star.svg");
background-color: #2BACE2;
animation-name: background_color_1;
animation-duration: 4s;
animation-iteration-count: infinite;
}


#2

try adding translate3d to force gpu rendering. animations per se are laggy in android. i have seen native apps jerk during animation also.