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

[Jonathan Harker]

Hallo Günter,

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.

Ich habe mir Deine Seite angekuckt. Du hast drei (3) Bilder und einen Slider mit fünf (5) Elementen. Was soll denn mit 56, bzw 42 Kindelementen dargestellt werden?????

Hast du schon einmal versucht, mehrere Elemente zu animieren, indem du die gleichen keyframes verwendest, die du mit animation-delay unterschiedlich taktest?

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.

So wurde der digitale Handschmeichler erfunden.

Bis bald! Jonathan

[Günter]

Hallo Jonathan,

mit animation-delay habe ich noch keine Erfahrung, werde ich mal probieren. Bisher hatte ich verstanden, dass die Angaben bei der animation für Start und Dauer der Animation ausreichend sind. Liegt dort der Performance-fresser?

Ja, die keyframes sind nur einmal beschrieben und werden immer wieder verwendet.

Je Anzeige sind es 14 Bilder (aktuell 3 mal 14), die das gleiche Motiv in unterschiedlicher Farbgebung zeigen. Das funktioniert einwandfrei.

Danke und Gruß Günter

[marctrix]

Hej Günter,

Ja, die keyframes sind nur einmal beschrieben und werden immer wieder verwendet.

Je Anzeige sind es 14 Bilder (aktuell 3 mal 14), die das gleiche Motiv in unterschiedlicher Farbgebung zeigen. Das funktioniert einwandfrei.

Vielleicht wären da SVGs angebracht? Filter? Dann brauchst du nur ein einziges Bild und du legst nur die Farben drüber…?!?

Marc

[Günter]

Hallo Marc,

Danke für deine Überlegungen. Mit SVGs kenne ich mich nicht aus. Die Bilder zeigen ein Motiv. Die Farbgebung ist nicht nur ein Filter, da habe ich auch in Handarbeit unterschiedliche Bereiche verschieden mit Farbe gefüllt. Ich werde mal versuchen mit weniger als 14 Bildern pro Motiv auszukommen (Dabei ist das schon eine Reduktion, es waren vorher 16, jedoch nur eine Anzeige und nicht drei).

Grüße

Günter

[Matthias Scharwies]

Servus!

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

Die animation-timing-function, muss wenn, dann in den oberen Regelsatz und nicht in die @keyframes-Regel.

Herzliche Grüße

Matthias Scharwies

[Günter]

Hallo Matthias,

danke für den Hinweis!

Grüße

Günter