CSS Animationen
Mit CSS3 kommen einfache, zugängliche, deklarative Animationen.
Ohne großen Aufwand können so dezente Übergänge etc. verwirklicht werden. Ohne Flash-Anwendung oder einer JavaScript-Datei.
Anzeige Hier werben
CSS3-Animationen funktionieren derzeit nur mit Safari 4 und Firefox 5. Da der Standard noch unverabschiedet ist, wird dazu jeder angehörigen Eigenschaft das Präfix "-webkit-" vorangestellt.
@keyframes: Schlüsselzustände festlegen
Mit @keyframes lassen sich verschiedene Zustände einer CSS-Animation definieren.
animation-name: Animation anwenden
Werte: String
Mit animation-name wird die Animation aus @keyframes auf ein Element angewendet - verwendet wird dabei der vorher definierte Name der Animation.
animation-timing-function: Animationspfad festlegen
Werte: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()
Mit animation-timing-function wird der Pfad den die Animation abläuft über Bezier-Kurven definiert.
animation-iteration-count: Wiederholungen
Werte: positiver Zahlenwert, infinite
Mit animation-iteration-count wird festgelegt, wie oft die Animation ablaufen soll. Auch unendlich ist möglich.
animation-direction: Animationen alternieren
Werte: normal, alternate
Mit animation-durantion lässt sich bestimmen, ob die Animation alle zwei Mal invertiert werden soll.
animation-delay: Start verzögern
Wert: Zeitangabe
Mit animation-delay lässt sich der Startzeitpunkt der Animation nach vorne und hinten schieben.
animation-duration: Durchlaufdauer
Wert: Zeitangabe
Mit animation-duration wird die Dauer eines Durchlaufs festgelegt.
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "CSS Animationen" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Animationen" hier bearbeiten.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
-
Ein Künstler hat keine besonderen physischen Fähigkeiten - er besitzt nur eine andere Wahrnehmung (...)
-
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
-
oho keine Angaben
Richtig Gut
Ich finde diese CSS3-Animationen sehr gut und überhaupt keinen "Unsinn".
Mobile Geräte
Nicht vergessen: unter mobilen Geräten ist das ausführen von JS weniger schnell als vordeklarierte, optimierte Animationen. Unter den mobilen Geräten ist Safari bei der Verwendung mit Abstand Nummer 1.
Re: Mobile Geräte
das stimmt. und der marktanteil des safaris ist in dem bereich auch recht hoch. dh: animationen werden sehr gut untersützt. der safari mobile kann das glaub ich nämlich schon.
btw: wie bekommt dich dazu bei icq zu antworten? (wollt dich schon öfter mal anchatten)
Immerhin...
Immerhin unterstützen schon 0% aller Browser diesen (derzeit) Unsinn...
Re: Immerhin...
Wieso Unsinn?
nunja ...
Ich will ja nicht die Verbreitung des Safari 4 überschätzen, aber http://www.webmasterpro.de/portal/forum/2009-03-20--zahl-bei-browserunterstuetzung/
Re: Immerhin...
bist aber gut in mathe :D
Re: Immerhin...
firefox 2 + firefox 3 + firefox 3.5 + IE6 + IE7 + IE8 + Safari 3 + Safari 4 + Opera 8 + Opera 9 + Chrome 1 = 11 Browser
1 Browser unterstützt das, also 1/11. und das ergibt ca. 9%. also 9% aller marktrelevanten browser unterstützen animation :)
münzt man es auf engines: wekit + gecko + trident + opera = 4 engines
1 aus vier: 1/4 = 25%. sogar noch besser!
0% falsch. setzen, sechs.
Re: Immerhin...
Du bist auch ziemlich gut. Check einfach, das ich ein "benutzten" vergessen hab.
Re: Immerhin...
0% aller benutzten browser? schau mal hier
Geil
Das werde ich mal ausprobieren... :)