WebKit anime les CSS

Christophe Laporte |
Utiliser les dernières nightly build de WebKit donne une idée des technologies qui seront peut-être incontournables demain sur le web. Dans les dernières préversions de son moteur de rendu, l'équipe de développement vient d'ajouter une nouvelle classe relative à l'animation des CSS


skitched


Sur cette page, outre l'image, ceux qui possèdent une version récente de WebKit verront des feuilles tomber en arrière-plan. La démonstration est assez impressionnante.

Les possibilités offertes aux développeurs sont nombreuses et son utilisation est relativement simple.

Dans son billet, Dean Jackson indique que cette classe ainsi que celles de transformation et de transition (lire: Des feuilles de style qui s'animent) sont d'ores et déjà incluses dans Safari pour iPhone. La preuve :


skitched


Selon Dean Jackson, dans bien des cas, il est plus intéressant pour ce type d'animation d'utiliser les CSS que JavaScript. C'est sans doute également une manière d'indiquer qu'il y a une vie après Flash…

Tags
avatar Shralldam | 

Cool ! Moi qui hais Flash...

avatar Mayeutik | 

Très bien de premier abord car offre de vrai alternative au flash, qui reste une technologie extrêmement lourde (le processeur qui s'affole au moindre bandeaux de pub flash...). Maintenant il faudra que l'implémentation soit bonne pour éviter justement la consommation abusée de temps processeur...

avatar HyperB | 

C'est mal connaître Flash que de croire que ses fonctionnalités se limitent au déplacement basique d'objets...

On attend toujours de voir quelque chose (ajax ou autre) capable de rivaliser avec Flash 9 et ActionScript 3...

avatar hooola | 

Assez impressionnant en effet, autant sous firefox 3.1 c'est moche, mais l'animation avec l'iPhone est vraiment belle et fluide :)

avatar mxmac | 

c'est quoi cette réflexion a deux francs ... le jour ou CSS pourra connecter une base de donnée comme flash ou ajax on en reparle ...

y'a une vie après le sapin de Noël de 1998 dans flash faudrait le savoir .... Journaliste ???

avatar Mayeutik | 

@HyperB et @mxmac
flash est très puissant c'est sur, ça connecte des bdd, génère du contenue etc... Mais la majorité des sites se servent de flash uniquement pour faire bouger 3 icônes et foutre des sons dans le site, peu de gens l'utilise a fond, encore moins l'utilise bien, en ce sens se genre de petit plus de CSS est une alternative à flash.
Et en combinant ça + Ajax, on pourrais faire plein de chose qui remplacerais 90% des animation flash du web.

avatar BioSS | 

Le flash c'est la vidéo, la 3D, les BDD, les XML, l'animation, et surtout la possibilité d'animer de façon très complexe avec l'inverse kinématic, les filtres, pixel blender, etc... Des trucs qui seront JAMAIS en CSS / HTML ni même javascript, ou alors ça sera 100 fois plus lourd.

Et si les bandeaux de pub rament c'est parce que les mecs qui les créent sont des bras cassés, du Flash bien optimisé ça reste peu gourmand. D'ailleurs si la version Mac était optimisée la version PC personne ne dirait rien.

avatar codeX | 

[quote]D'ailleurs si la version Mac était optimisée la version PC personne ne dirait rien.[/quote]
Justement elle ne l'est pas. Le jour ou, on pourra reparler du fait d'avoir de la vidéo, de la 3D, des BDD, du XML, des animations et la possibilité d'animer de façon très complexe avec l'inverse kinématic, les filtres, pixel blender, etc... En attendant, qu'on nous lâche un peu avec Flash.

avatar brume | 

En tout cas ça promet, c'est déjà assez fluide. Mais ... ça bouffe environ 90% de processeur ici.

Je reste perplexe sur le fait d'utiliser ça en CSS plutôt qu'en javascript. C'est plus difficile d'avoir de l'interaction.

avatar Almux | 

Eh bien, moi, cela m'intéresse au premier chef... puisque je SUIS un de ces bras cassés QUI NE SAIT PAS FAIRE DE JOLIS TRUCS QUI BOUGENT SANS FLASH! ActionScript... c'est un peu touffu, pour ma p'tite tête... ;)
Par contre, quand je peux faire une feuille de style efficace pour un site moins "cinématographique", je jubile!!
JavaScript?... ;p ...C'est un peu comme de l'ActionScript, non? Sacrément compliqué pour mon âge!
Mais si quelqu'un a un bon lien d'un tuto d'animation interactive en JavaScript, je veux bien tenter le coup!

avatar oomu | 

"C'est mal connaître Flash que de croire que ses fonctionnalités se limitent au déplacement basique d'objets...

On attend toujours de voir quelque chose (ajax ou autre) capable de rivaliser avec Flash 9 et ActionScript 3...
"

il n'y a aucun avenir à terme, à Flash.

pourquoi ?

parce que TOUS les services de flash sont mis, les uns après les autres, dans le navigateur standardisé !

la vidéo ? html5
la base de donnée locale ? html5
les sous-process ? html5
actionscript ? ben c'est javascript (notons que le moteur actionscript de flash9 fut donné à mozilla sous licence gpl)
vectoriel, animation : canvas dom+svg+javscript.

ce qui se passe, c'est que le navigateur est tout simplement en train d'être enrichi. Ce qui avant se faisait dans la boite noire flash est maintenant exposé sous forme de html , css et javascript

html est le contenu
javascript est la programmation
css est la forme.

pourquoi c'est important les animations et transformations en css ? parce que ce n'est qu'un style, une forme que peut prendre le site. ce n'est pas de l'interaction. il est très utile et efficace que cela soit modifiable simplement par css.

javascript est l'interaction. Javascript modifiera via DOM toutes les propriétés css et contenu html.

-
Flash ce n'est pas un plugin seulement. si ce n'était qu'un plugin et du actionscript , flash serait nul et on n'en parlerai plus.

Flash c'est un logiciel très étoffé, très complet. Flash MX.

Il serait tout à fait possible qu'à terme, Adobe créé un générateur de code svg+js qui soit l'exacte de ce qui était avant propriétaire flash (le swf binaire)

-
encore prématuré. HTML5 ne fournira pas tout ce que permet flash 10. Mais c'est clairement la voie, c'est clairement ce qui est désiré par à peu près tout le monde sauf Adobe.

-
par exemple, opengl sera accessible via DOM et js bientôt. cela sera encore un pan de moins pour flash.

avatar oomu | 

"Flash prend de plus en plus de place dans la vidéo sur le net et là par contre, difficile de le remplacer."

html5.

au moment où tous les navigateurs fourniront de base h264 et ogg, les sites feront vite la bascule. Le gain en performance sera substantiel et la simplicité accrue.

Plus besoin de se farcir un des lecteurs flash de vidéo flv , le tout sera manipulé par l'interface du site lui même que le développeur aura écrit en html/js, que le graphiste aura stylé en css.

l'utilisateur n'aura plus du tout la question du "plugin flash", ni de le mettre à jour.

-
non, cela ne se fera pas en 2009 malgré opera, safari 4 et firefox 3.1

avatar - B'n - | 

Ce serait pas mal qu'ils intègrent des choses déjà plus basiques et récurentes dans le CSS comme par exemple la possibilité de faire des blocs arrondis, des ombres portées, des dégradés, …
Ça doit pas être compliqué à intégrer et allégerait grandement le code et le poids (moins d'images).

Il y a un endroit où on peut voir la roadmap des futures évolutions/intégrations des CSS/standards ?

[et pour le Flash, à chaque news on a les mêmes reproches… :) alors qu'il est si simple de supprimer tous les Flash ou tous les Flash de pub (PithHelmet, AdBlock…) Flash n'est pas une mauvaise technologie, mais est souvent mal utilisée c'est vrai.]

avatar oomu | 

notons que youtube fournit déjà presque tout leur contenu en h264 (pour l'iphone), et que flash10 sait traiter du h264.

On est donc presque mure pour le passage généralisé à mpeg h264, et y a ogg comme solution de repli. Le plugin flash ne sera plus nécessaire.

-
accessoirement, il devient très facile de se faire son petit youtube à soi lisible via firefox 3.1/safari4. sans connaissance particulière de flash ni le moindre outil d'adobe.

avatar lastbalrog | 

j'dis un grand OUI. si c'est bien mieu optimisé que java pour la rapidité, car si fait ralentir le chargement du css à 5jour alors l'intérrer est quand même vite perdu, malgré qu'il intéressant d'avoir plusieurs possibilité :)

c'est quand que tout les navigateurs passe en CSS3 ?!! j'ai hâte !! :D

avatar Zed-K | 

@ oomu :
[quote=Wikipedia]The specification is ongoing work, and expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status.[/quote]
En gros, HTML5 est très intéressant, oui.
Sauf que ce n'est pas (pour l'instant) un standard, et qu'apparement ce n'est pas près d'en devenir un ("many years"... "lol", comme on dit).
Donc c'est plutôt amusant de voir les défenseurs des standards défendre... quelque chose qui n'est ni standard, ni recommandé par le W3C.
En gros quelque chose que les navigateurs implémentent de leur propre chef, exactement ce qu'on reprochait à IE en son temps... Enfin je dis ça, je dis rien.

Quant à penser que Flash va être enterré par l'HTML5 (si le W3C se décide enfin un jour à travailler plutôt qu'à se branler la nouille (*joke*)), c'est bien mal connaître ses capacités.
Ne serait-ce que pour la lecture de vidéo/audio, reste à voir si les contrôleurs seront aussi configurables que ceux que l'on peut faire en Flash.
Quant à l'accès à la webcam et au microphone, je crois pas en avoir entendu parler dans les specs "pré-alpha-pas-finies-peut-être-prêtes-d'ici-2015" d'HTML5.
Aucune notion de 3D non plus, de plus en plus utilisée sur les sites commerciaux.

Et quelque chose me dit que concevoir des "CSS animés" va être un brin plus complexe pour un graphiste que de réaliser la même animation avec l'IDE de Flash, pensée pour le graphisme et l'animation (à moins qu'un IDE similaire arrive à les séduire).

Alors oui, l'HTML5 permettra d'épurer une bonne partie du Flash sur le net, pour ses applications les plus basiques, et c'est à mon sens une bonne chose.
Mais de là à dire qu'il signera l'arrêt de mort de Flash, ça me fait doucement rigoler =)

avatar Zed-K | 

D'ici à ce qu'HTML5 soit recommandé par le W3C, Flash saura faire tourner WOW dans nos navigateurs...

Il y a déjà une version du tout premier Doom porté en Flash (trouvable via google), ainsi que Quake 1 (démo lors d'une "keynote" Adobe), grâce à un projet nommé Alchemy, permettant d'utiliser des portions de code C/C++ dans un Flash pour y gagner en performance.

Avec Flash 9 on a eu le droit (entre autre) à l'AS3, qui fait définitivement passer le JS pour un gadget technologique.

On peut critiquer Adobe pour la non-optimisation de leur Flash Player, mais au moins leurs dev bossent pour de vrai, et ont une énorme longueur d'avance sur ce qui peut être fait avec les technos dites "standard".

avatar Zed-K | 

@ lastbalrog :
CSS3 est toujours en cours de développement... Toujours pas recommandé non plus.
http://en.wikipedia.org/wiki/CSS3#CSS_3

avatar HyperB | 

@oomu

C'est pas souvent le cas, mais là je suis d'accord avec toi. Je suis le premier à rêver d'un logiciel qui, à la manière de Adobe Flash CS4, permette de générer des applications/animations en svg/javascript... C'est le rêve ça !!

avatar Lapin Masqué | 

Tant qu'il sera plus simple pour un développeur "moyen" de faire une application en AS3 qu'en HTML/CSS/JavaScript on verra beaucoup de flash quel que soit le niveau de CSS.

Je ne dénigre pas le Flash et l'AS en disant que c'est "simple" je dis juste qu'en matière d'outils de développement Flash CS4 est quand même plus simple à manier qu'un Notepad pour une interface équivalente
Et puis le player Flash a le même comportement sur toutes les machines (je ne parle pas des perfs).
Alors que pour faire la même chose en JavaScript, il faut faire du code serveur (accès bases de données par exemple) et donc connaître PHP/Java/Ruby (Bien que Jaxer semble prometteur) et le HTML/JavaScript/CSS ainsi que les subtilités spécifiques aux frameworks, browsers et j'en passe.

Donc même si HTML/CSS/JavaScript devient plus puissant que Flash, tant qu'il n'existera pas d'outil puissant (je ne parle pas de Dreamweaver et de ses tables) pour ça on verra du flash mal codé pour des bannières.

---

Pure spéculation : Le fait que Adobe inclue le support HTML/CSS/JavaScript dans AIR est peut-être un signe qu'Adobe y croit et qu'ils vont nous pondre un outil puissant et hors de prix =') (Je parle pas de Dreamweaver même si je l'avoue ça fait depuis longtemps que j'y touche plus)

avatar dmsr | 

"C'est sans doute également une manière d'indiquer qu'il y a une vie après Flash"
et SVG sur iPhone ça marche? (g pad d'iPhone) :-(
parce que svg+css+js et adieu Flash et Silverlight (enfin j'aimerais bien...)

avatar gloup gloup | 

SVG fonctionnne très bien sur iphone, en fait il fonctionne bien partout sauf dans IE (il faut un plugin). Il sera peut-être présent dans la version 8.1 ou 8.5. Soupir…

Ceci dit (j'ai pas lu tous les commentaires) mais juste une ou deux choses :

1. On peut parfaitement accéder à des bases de données en javascript (ajax vous connaisez ?), avec (x)html 5 on pourra même gérer des bases de données locales, dans le navigateur, pour du travail offline ou pour accélérer certains traitements…

2. La gueguerre flash contre le reste du monde me gonfle : à chaque technologie ses avantages et ses inconvénients. C'est sûr que ça serait génial que svg soit implémenté partout, avec smil et les css animées mais pour l'instant…

avatar gloup gloup | 

Tiens, [url=http://www.the-art-of-web.com/css/css-animation/]une petite page[/url] pour la route (à regarder avec [url=http://nightly.webkit.org/]webkit[/url])…

avatar Axelvak | 

C'est sympa de vouloir remplacer Flash, mais si c'est pour se taper entre 80 et 90% d'usage CPU avec Safari je ne vois pas trop l'intérêt pour le moment…

CONNEXION UTILISATEUR