Le site de Patrick Darcheville

Tutoriel CSS version 3

Animations avec CSS

1
2
3
4
5
6

L'animation 3D ci-dessus a été réalisée uniquement en HTLM & CSS3.
Pour en savoir plus sur cette animation : animation du dé expliquée

Moyennant quelques lignes de code en JavaScript-jQuery il serait possible de contrôler cette animation CSS : suspendre ou reprendre l'animation.

Ce tutoriel n'est pas destiné aux débutants en HTML & CSS. Il se contente surtout ((même si il y a quelques pages de révisons) de signaler toutes les nouveautés apportées par la version 3 de CSS et s'adresse plutôt aux développeurs Web déjà expérimentés.
Ceux qui débutent dans la programmation Web doivent donc visiter en premier lieu le tutoriel intitulé "Pour les débutants" (dans le même site) pour acquérir les bases du HTML & CSS(mais aussi quelques notions de PHP).
Même les visiteurs pensant connaitre CSS peuvent cependant vérifier leurs acquis en relisant les pages de la partie "révisions". Ils découvriront peut-être certaines fonctionnalités de la version 2 peu connues (feuille de style pour impression, numérotation automatique des titres, media queries, etc.)

CSS de plus en plus puissant

Nouvelles fonctionnalités de la version 3

On peut appliquer une animation écrite en CSS non seulement à des éléments HTML mais aussi à des objets SVG. Donc si vous voulez animer un objet graphique sophistiqué il suffit de le dessiner avec SVG puis de l'animer via un "keyframes" CSS.
Dans mon site il y a tuto complet sur les différentes techniques d'animations d'objets SVG : Animer éléments SVG via CSS

Les limites de CSS

Attention même si CSS est de plus en plus puissant les possibilités de modification du DOM restent limitées.
Ainsi via CSS vous ne pouvez pas modifier les attributs d'un élément HTML ou changer son contenu ou encore ajouter /supprimer des noeuds dans le DOM.
Donc la programmation JavaScript reste indispensable dans bien des cas !

Différents chapitres du tuto