Als wir im Dezember merkten, dass einige Tutorials seit der Einführung von CSS-Amimations nicht mehr grundlegend überarbeitet wurden, überlegten wir auf unserem [Stammtisch](https://wiki.selfhtml.org/wiki/Hilfe:Stammtisch), **wie** und **wann** man überhaupt Animationen einsetzen sollte. Auf keinen Fall wollten wir eine Sammlung von *loading spinnern* präsentieren. In [**Animation/Übergänge**](https://wiki.selfhtml.org/wiki/Animation/%C3%9Cberg%C3%A4nge) wird gezeigt, wie man die Änderung eines Zustands, etwas beim Hovern mit der Maus anzeigen kann. Mit `transition` wird ein weicher Übergang zwischen zwei Werten interpoliert. Im Tutorial zu [**mehrstufigen Animationen**](https://wiki.selfhtml.org/wiki/Animation/mehrstufige_Animationen) merkten wir schnell, dass CSS Zustände selektieren kann – oft aber nach jeder Benutzeraktion neu überprüft werden muss, ob Eingaben korrekt sind. Deshalb helfen einige Zeilen JavaScript dem Nutzer eine direkte Rückmeldung zu geben: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html" width="600" height="300" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html ">SELFHTML</a> </p> </iframe> Auch SVG kann [**mit CSS animiert werden**](https://wiki.selfhtml.org/wiki/Einstieg_in_SVG/SVG_mit_CSS_animieren). Hier finden sich einige Tricks wie animierte Randlinien, die eben nur mit SVG und `stroke` bzw. `stroke-dasharray` funktionieren. Nicht alles ist neu – unsere SVG-Uhr gibt es schon seit 2020: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Uhr-5.html" width="600" height="300" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Einstieg_in_SVG/SVG_mit_CSS_animieren#Zeitabfrage">SVG-Uhr</a> </p> </iframe> Unser Fazit: Animationen können Webseiten aufwerten und Zustandsänderungen und Benutzeraktionen visualisieren, sie sollten aber nie zum Selbstzweck werden!

Als wir im Dezember merkten, dass einige Tutorials seit der Einführung von CSS-Amimations nicht mehr grundlegend überarbeitet wurden, überlegten wir auf unserem [Stammtisch](https://wiki.selfhtml.org/wiki/Hilfe:Stammtisch), **wie** und **wann** man überhaupt Animationen einsetzen sollte. Auf keinen Fall wollten wir eine Sammlung von *loading spinnern* präsentieren. In [**Animation/Übergänge**](https://wiki.selfhtml.org/wiki/Animation/%C3%9Cberg%C3%A4nge) wird gezeigt, wie man die Änderung eines Zustands, etwas beim Hovern mit der Maus anzeigen kann. Mit `transition` wird ein weicher Übergang zwischen zwei Werten interpoliert. Im Tutorial zu [**mehrstufigen Animationen**](https://wiki.selfhtml.org/wiki/Animation/mehrstufige_Animationen) merkten wir schnell, dass CSS Zustände selektieren kann – oft aber nach jeder Benutzeraktion neu überprüft werden muss, ob Eingaben korrekt sind. Deshalb helfen einige Zeilen JavaScript dem Nutzer eine direkte Rückmeldung zu geben: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html" width="600" height="300" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html ">SELFHTML</a> </p> </iframe> Auch SVG kann [**mit CSS animiert werden**](https://wiki.selfhtml.org/wiki/Einstieg_in_SVG/SVG_mit_CSS_animieren). Hier finden sich einige Tricks wie animierte Randlinien, die eben nur mit SVG und `stroke` bzw. `stroke-dasharray` funktionieren. Nicht alles ist neu – unsere SVG-Uhr gibt es schon seit 2020: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Uhr-5.html" width="600" height="300" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Einstieg_in_SVG/SVG_mit_CSS_animieren#Zeitabfrage">SVG-Uhr</a> </p> </iframe> Unser Fazit: Animationen können Webseiten aufwerten und Zustandsänderungen und Benutzeraktionen visualisieren, sollten aber nie zum Selbstzweck werden!

Als wir im Dezember merkten, dass einige Tutorials seit der Einführung von CSS-Amimations nicht mehr grundlegend überarbeitet wurden, überlegten wir auf unserem [Stammtisch](https://wiki.selfhtml.org/wiki/Hilfe:Stammtisch), **wie** und **wann** man überhaupt Animationen einsetzen sollte. Auf keinen Fall wollten wir eine Sammlung von *loading spinnern* präsentieren. In [**Animation/Übergänge**](https://wiki.selfhtml.org/wiki/Animation/%C3%9Cberg%C3%A4nge) wird gezeigt, wie man die Änderung eines Zustands, etwas beim Hovern mit der Maus anzeigen kann. Mit `transition` wird ein weicher Übergang zwischen zwei Werten interpoliert. Im Tutorial zu [**mehrstufigen Animationen**](https://wiki.selfhtml.org/wiki/Animation/mehrstufige_Animationen) merkten wir schnell, dass CSS Zustände selektieren kann – oft aber nach jeder Benutzeraktion neu überprüft werden muss, ob Eingaben korrekt sind. Deshalb helfen einige Zeilen JavaScript dem Nutzer eine direkte Rückmeldung zu geben: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html" width="600" height="300" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html ">SELFHTML</a> </p> </iframe> Auch SVG kann [**mit CSS animiert werden**](https://wiki.selfhtml.org/wiki/Einstieg_in_SVG/SVG_mit_CSS_animieren). Hier finden sich einige Tricks wie animierte Randlinien, die eben nur mit SVG und `stroke` bzw. `stroke-dasharray` funktionieren. Nicht alles ist neu – unsere SVG-Uhr gibt es schon seit 2020: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Uhr-5.html" width="600" height="300" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Einstieg_in_SVG/SVG_mit_CSS_animieren#Zeitabfrage">SVG-Uhr</a> </p> </iframe>

Als wir im Dezember merkten, dass einige Tutorials seit der Einführung von CSS-Amimations nicht mehr grundlegend überarbeitet wurden, überlegten wir auf unserem [Stammtisch](https://wiki.selfhtml.org/wiki/Hilfe:Stammtisch), **wie** und **wann** man überhaupt Animationen einsetzen sollte. Auf keinen Fall wollten wir eine Sammlung von *loading spinnern* präsentieren. In [Animation/Übergänge](https://wiki.selfhtml.org/wiki/Animation/%C3%9Cberg%C3%A4nge) wird gezeigt, wie man die Änderung eines Zustands, etwas beim Hovern mit der Maus anzeigen kann. Mit `transition` wird ein weicher Übergang zwischen zwei Werten interpoliert. Im Tutorial zu [mehrstufigen Animationen](https://wiki.selfhtml.org/wiki/Animation/mehrstufige_Animationen) merkten wir schnell, dass CSS Zustände selektieren kann – oft aber nach jeder Benutzeraktion neu überprüft werden muss, ob Eingaben korrekt sind. Deshalb helfen einige Zeilen JavaScript dem Nutzer eine direkte Rückmeldung zu geben: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html width="900" height="400" name="SELFHTML" title="Eingabe von Zahlen"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Animation-6.html ">SELFHTML</a> </p> </iframe>

Als wir im Dezember merkten, dass einige Tutorials seit der Einführung von CSS-Amimations nicht mehr grundlegend überarbeitet wurden, *kommt morgen*