Rechnerbelastung durch css animation und keyframes

[Günter]

Guten Morgen, ich bastele eine Darstellung mit HTML und CSS für eine Präsentation auf einem Display und habe jetzt lernen müssen, dass diese Seite ein Ressourcenfresser ist. Mein Smartphone, mein Tablet und auch mein Notebook glühen auf. Ich verwende "animation" und "keyframes" etwa in folgender Form:

figure:nth-child(42) {  animation: xfadeD  14s 96s infinite;}

@keyframes xfade1 {0%{opacity: 1;}  12.5%{opacity: .3;} 50%{opacity: .9;} 90%{opacity: 0;} animation-timing-function: linear;}

Eigentlich sollten es 56 childs werden, doch 42 stressen jede Technik die ich habe.

Gibt es Möglichkeiten, ressourcensparsamer zu handeln, ähnlich wie bei "translate" und "translate3d"? Das - noch unfertige - Beispiel habe ich als problematische Seite verlinkt.

Danke und Gruß Günter