CSS-Animationsübergangseffekte für beliebige Anzahl von Scheiben

Question

Ich mache eine Website mit mehreren Kanälen und ein Navigationsmenü, um zwischen ihnen zu wechseln.Ich möchte die Pane-Switching mit Übergangseffekten in CSS animieren.Die Scheiben sind

Elemente: generasacodicetagpre.

, die nebeneinander positioniert sind, sodass ich die Margin-linke Eigenschaft des Inhalts animiere, um die Plane dazu zu bringen, nach links und rechts zu blättern, in und außerhalb der Ansicht: generasacodicetagpre.

, was natürlich umgekehrt werden kann.Das Problem ist, dass dieser Prozess mehr als 3 Scheiben unhandlich wäre (die Länge des Codes wird mit der Anzahl der Scheiben quadratisch.

so ... wie würdest du dies für eine beliebige Anzahl von Scheiben schreiben?

edit: Ich weiß, dass ich Javascript verwenden kann, um den CSS-Code zu generieren, aber ich hoffe, es gibt eine elegante Art und Weise, die ich vermisst habe.

Answer 1

Ich weiß nicht, ob Sie tot sind, wenn Sie mit Keyframes verwendet werden, während Keyframes, während die Keyframes weitere fortgeschrittene Animationen ermöglicht, Ihr spezielles gleitendes Beispiel mit einem einfachen CSS-Übergang erfüllt werden kann. generasacodicetagpre.

Diese Regel besagt, dass der Inhaltsblock ein 1-Sekunden-Lockerung-Übergang verwendet wird, wenn die generationspflichtige Eigenschaft, die Sie in JavaScript in JavaScript können, in JavaScript erfolgen, wenn der Benutzer navigiert.

Sie erfahren Sie mehr über CSS-Übergänge auf dem webkit Blog .