Webkit: CSS-Animation
Anzeige Hier werben
Kein JavaScript, kein Flash und auch sonst nur schlankes CSS. Mit den neuesten Nightly Builds von Apples Webkit-Engine ist es möglich, DIVs und ähnliches durch die Gegend zu schieben.
Auf dem offiziellen Weblog des Entwicklerteams sind einige CSS-Eigenschaften zu sehen.
Pulse
Zum Beispiel...
Definition des Animatioseffekts
css
1
2
3
4
5
6
7
8 | @-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
|
Animation
css
1
2
3
4
5
6 | div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}
|
...und noch viele weitere.
Öffnet man dieses Beispiel (Pulse), dieses (Bouncing box) oder dieses (Falling Leaves) mit dem aktuellen Webkit-Browser sieht man die Animationen.
Über den Autor: meggs
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten
Sehr Nütlich
Also ich finde es äusserst nützlich, weil ich wirklich keine Zeile Javascript zu Stande bekomme und für Animationen CSS3 einfach zu benutzen ist. Und ich will meine Website fürs iPhone optimieren und mit Animationen komme ich da mit JavaScript nicht weit. Das ruckelt und sieht blöd aus. Das müsste mit CSS deutlich schneller gehen.
Was für ein...
...Schwachsinn. Wozu brauche ich DIVs die pulsieren oder was auch immer machen? Und vorallem in nur wenigen speziellen Browsern? Bis das vom IE möglich gemacht wird vergehen sicher noch Jahrhunderte und ob der Firefox das anbieten wird in Zukunft...da bin ich mir auch nicht sicher. Denn wie die Befehle ja schon zeigen ist das ne Webkit interne Sache.
Aber jetzt mal ganz ehrlich. Wozu? DIVs herumschieben und sich verändern lassen kann ich wunderbar auch per JS machen. Zwar etwas aufwändiger aber es kommt vermutlich aufs gleiche Ergebnis raus. Dafür ist aber der Anteil der User mit aktiviertem JS deutlich größer als der Marktanteil der Hypermodernen-HighTech-Webkit Browser.
Außerdem hat sowas meines Erachtens nichts in CSS verloren. CSS sehe ich als Ergänzung zu HTML um diverse optische Anpassungen vorzunehmen die HTML nicht von sich aus unterstützt. Für Animationen und andere Spielereien gibt es JS. Wozu muss ich jetzt also Kapazitäten von JS in CSS einbinden? Ich bin ja gerne offen für neue Erfindungen, aber sie müssen bitte auch Sinn machen!
[IRONY] Machen wir doch einen eigenen Browser und erfinden wir HTJSS oder sowas...eine Sprache die alles kann aber kein Mensch mehr versteht bzw. vollständig lernen kann. Denn das scheint ja die Zukunft des Webdesign zu sein. [/IRONY]
Re: Was für ein...
zum einen sind das hier beispiele. dh sie erfüllen keine funktion. datürlich sind kleinere animationen sinnvoll wie man an vielen viele ajax-websites sehen kann. die befehle zeigen garnichts. webkit hält sich mit der nomenklatur ölediglich an die richtlinie, dass vor einer offiziellen verabschiedung von standards neue eigenschaften nur mit herstellerspezifischen präfixen versehen sein dürfen. natürlich geht das auch mit js. damit geht sogar noch viel mehr. aber wieso gleich mit panzerfäusten auf spatzen schießen? nebenbei besitzt auch js eingeschaften die eigtl zu css gehören. wieso also nicht umgekehrt, wo doch der unterschied eh völlig klar ist: die animationen hier sind rein deklarativ. und marktanteil sagt null über nutzen aus. flash ist extrem weit verbeitet - und wer braucht das eigtl noch. in css verloren hat sehr wohl etwas. denn wie du schon sagt, nimmt css anpassungen von html vor. und wieso sollte das grün-machen einer schrift etwas anderes sein als das bewegt-machen einer schrift. das macht alles sinn. eine kleine animation. mehr braucht man meist eh nicht. und dazu muss dann der browser nicht "hypermodern" odr "hightech" sein, um javascript sauber und performant rüberzubringen sondern lediglich diese eigenschaften verstehen.
Re: Was für ein...
Es geht mir dabei ums Prinzip.
Das JS Eigenschaften hat die auch CSS hat ist nur halb richtig. JS kann lediglich auf die Style-Einstellungen (ich gehe davon aus das du die meinst) zugreifen, welche von CSS mal gesetzt wurden (jedes CSS Attribut hat ja auch einen Defaultwert, auch wenn man ihn selbst nicht deklariert hat). Das halte ich auch durchaus für sinnvoll, da man CSS während der Laufzeit nicht ändern kann, über JS aber trotzdem die Styles verändern kann. Man könnte mit der gleichen Argumentation sagen, dass JS ja auch Eigenschaften von HTML hat. Der Unterschied ist aber: JS hat ohne Zugriff auf HTML bzw. CSS Eigenschaften wenig Sinn. CSS hat aber einen gewaltigen Sinn, auch ohne diese Animationsspielereien.
Aber um aufs Prinzip zurück zu kommen. Ich entsinne mich, das man bei HTML4 Transitional wahnsinnig viele optische Anpassungen vornehmen konnte. Mit dem Wechsel zu XHTML sind die nun plötzlich verschwunden. Warum? Weil man HTML zur Strukturierung und CSS zur optischen Formatierung klar abgrenzen will. Finde ich auch sinnvoll und logisch. Jetzt kommt aber eine Firma wie Apple an, und möchte auf einmal CSS und JS miteinander vermischen. Wenn man sowas gut heißt, hätte man sich also im Umkehrschluss auch die Änderungen bei XHTML sparen können. Denn genau das was man mit HTML4->XHTML erreichen wollte/will wird mit diesen CSS Spielereien mit Füßen getreten.
Und ganz nebenbei...für eine kleine Animation, zB eine bewegte Schrift, brauche ich auch keinen ultra-performanten Browser um das flüssig darzustellen. Das hat im IE5.5 oder uralt Mozilla schon funktioniert und jeder wird mir wohl zustimmen, dass die alles andere als performant in Sachen JS waren.
Re: Was für ein...
ja, das ist richtig. ja js hat ohne html+css keinen sinn. aber css hat ohne html ja auch keinen sinn. ob mit oder ohne animationen. es stimmt einfach nicht, dass animationen js vorbehalten sind - eine animation ist ganz normal eine layout/design-beeinflussung und damit fällt es auch in css.
ja, das ist richtig. man hat struktur (HTML) und layout/design (css,...) zu trennen. nur gehören animationen zu layout/design. was nicht stimmt ist, dass versucht wird js und css zu vermischen. das ist absoluter unsinn. du brauchst dir bloß die eigenschaften ansehen dann wirst du es verstehen.
du sagstest aber, dass man für css einen ultramodernen browser benötigt. das ist aber kein argument, weil man eine eigenschaft nicht ablehnen kann, weil der großteil der browser sie nicht interpretieren kann. das wär immer so gewesen. zb hätte man auch zu border-radius sagen können, dass das unsinn ist, weil man dazu einen "hypermodernen" browser bräuchte. is einfach unsinn.
Re: Was für ein...
Mir fällt da nur ein Grund ein: Performance. Allerdings fände ich es hier viel schöner im JS ein paar standardisierte Aufrufe zur Verfügung zu stellen um zwischen verschiedenen CSS-Klassen/-Eigenschaften einen weichen Übergang zu bringen o.ä. Also eine optimierte Animations-API ins JS zu legen und nicht im CSS irgendwelche Animationen zu erlauben.
Re: Was für ein...
Performance weiß ich nicht so recht. Irgendwelche Funktionen muss ja der Browser auch bei der CSS Variante aufrufen. Der sagt ja nicht "Hex Hex" und das bewegt sich ;) Ich denke wenn man das mit einer relativ schlanken JS Funktion macht dürfte die Performance nicht sonderlich viel schlechter sein (zumal ja Webkit eh Rekordhalter in Sachen JS ist (soweit ich weiß)).
Wo hört CSS auf und wo fängt JS an?
wird langsam affig
Re: Wo hört CSS auf und wo fängt JS an?
Wo siehst du da JS? Ich sehe da nur deklarative Animation. So wie in SMIL.
Re: Wo hört CSS auf und wo fängt JS an?
ich meine die grenze zwischen JS und CSS
Re: Wo hört CSS auf und wo fängt JS an?
hat doch thomas geschrieben: css ist eine reine deklarationssparache, man wird bei weitem nicht alles realisieren können was mit js oder fl geht.
Re: Wo hört CSS auf und wo fängt JS an?
Siehe meinen Kommentar oben...warum muss ich in CSS Sachen machen können für die es schon JS gibt?
Re: Wo hört CSS auf und wo fängt JS an?
Um sie dort besser und einfacher zu machen vielleicht?
CSS konnte als es erfunden wurde auch nur sachen, die HTML auch schon konnte - bloß besser, einfacher, flexiebler und anders halt.
"Pulse is the new blink"
Juhu, darauf hat die Welt gewartet, endlich gibts blink wieder..... *kopfschüttel*
Re: "Pulse is the new blink"
darauf zielt das hier nicht ab?
Re: "Pulse is the new blink"
fürchterlich! meine flash-augen weinen. :'( verlasst euch doch auf uns grafiker, ihr programmierheinis! wenn was animiert ist, dann ALLES andere außer divs.
Re: "Pulse is the new blink"
na ja ich weiß nicht - mir ist eine Webseite mit JavaScript mittlerweile lieber als ne Webseite mit Flash
meine persönliche Meinung
Re: "Pulse is the new blink"
dem pflichte ich mal bei. am besten keines von beiden. :)
Re: "Pulse is the new blink"
oder einfach die passende Kombo finden, sodass die Kompatiblität als Grundlage vorherrscht und das Javascript einfach nur(!) den Komfort und das Look&Feel gibt.