I've implemented a unique animation for a div that features two semi-transparent backgrounds:
/* Custom keyframes for the animated background DIV. */
@-webkit-keyframes wind
{
0%
{
background-position: 0px 0px, 0px 0px;
}
100%
{
background-position: 370px 370px, 424px 242px;
}
}
Have you taken note of the comma used in the CSS code?
#animatedBkg
{
background-image: url('1.png'), url('2.png');
}
Both image files include an alpha channel for transparency.
To enhance performance on iPhone devices, I attempted to optimize the code by replacing the CPU-intensive background-position property with -webkit-transform: translate():
/* Adjusted keyframes utilizing -webkit-transform */
@-webkit-keyframes wind
{
0%
{
-webkit-transform: translate(0px, 0px), translate(0px, 0px);
}
100%
{
-webkit-transform: translate(370px, 370px), translate(424px, 242px);
}
}
Despite my efforts, this modification didn't yield the desired results. However, upon removing the comma, both background layers moved synchronously albeit much smoother (although only the first translate() appeared effective). The significant difference in speed compelled me to stick with this method rather than reverting back to background-image.
Are there alternative solutions available apart from creating separate divs like #animatedBkg1 and #animatedBkg2?
Best regards,