jQuery code zeigt manchmal verschiedene Große in Chrome

[Gunnar Bittersmann]

@@Rolf B

@keyframes showLayer
{
  0% { height: 0vh;	background-color: rgba(50, 50, 50, 0); }
  1% { height: 100vh;	background-color: rgba(50, 50, 50, 0.5); }
  100% { height: 100vh; background-color: rgba(50, 50, 50, 0.5); }
}

Nein.

Welche Eigenschaften sollte man animieren? transform und opacity.

Welche Eigenschaften sollte man nicht animieren? Alle anderen.

Das hieße hier: nicht height animieren, sondern transform: scaleY() verwenden; background-color: rgba(50, 50, 50, 0.5) so lassen und opacity verwenden.

@keyframes showLayerContent
{
  0% { transform: translate(0, -11em) scale(0); opacity: 0; }
  100% { transform: translate(0, 0) scale(1) ; opacity: 1; }
}

Geht doch.

Wozu eigentlich zwei Animationen showLayer und showLayerContent?

Und wieso überhaupt animation, wenn man transition will?

Mir scheint, hier stimmt so ziemlich gar nichts.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!