CSS Animationen

Eine Animation bei Mausover zB. Drehung, kann unterschiedlich ausgelöst werden:
1. CSS TRANSITION
- Erlaubt 2 Zustände, Anfangs- und Endzustand
- Auslösung durch sog. Trigger (hover/focus), eine Mausberührung oder Touch.
- Kein Loop (zb. spiele 8x ab) ist NICHT erlaubt.
2. CSS ANIMATION (KEYFRAME)
- Erlaubt 2 Zustände mit möglichen Zustände dazwischen, eben Keyframes, wie beim Film.
- Startet im Gegensatz zu 1) auch automatisch (z.b. Foto-Slideshow) beim Laden der Seite.
- Loop-Angabe ist ERLAUBT.
GEMEINSAM (1. und 2.) HABEN BEIDE :
- Zeitangabe für kompletten Durchlauf
- Zeitverzögernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie:
⇒ starte schnell, ende langsam (ease-out)
⇒ starte langsam ende schnell (ease-in)
⇒ spiele gleichmässig ab (linear) o.ä. */

Site Testen mit Firefox-Tools

Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrössen testen".
Praktisch: Die jeweilige Auflösung kann leicht per Klick (Button mit kleinem Pfeil) eingestellt werden. So kann einfach das Verhalten von Handys, Tablets und PC's getestet werden (Hoch-und Querformat).
Mittlerweile hat Firefox diesen Tester um noch eine weitere Option erweitert, nämlich die Möglichkeit verschiedene Marken-Geräte zu testen. Doch wird kaum jemand für jede Möglichkeit die passende Einstellung programmieren
Man wird sich meist auf ein paar gängige Formate beschränken

[3] Der schnelle Weg

Schnell für einen ersten Überblick am PC: Minimieren Sie das Browser-Fenster in Ihrem Lieblingsbrowser und ziehen Sie dann den Rand vom Browser-Fenster mit gedrückt gehaltener Maustaste langsam von rechts nach links. Damit wird das Fenster Schmaler oder Breiter eingestellt.
Achte darauf, wann das Layout umbricht, zum Beispiel von zwei-spaltig auf ein-spaltig oder Objekte sich in der Grösse verändern.