Transitions CSS3. Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript.
Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. Le module qui nous intéresse est nommé CSS Transition Module. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification.
Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : La ou les propriété(s) à animer La durée de l'animation Exemples concrets. CSS Transitions. Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification.
Avec transition - Introduction aux animations en CSS 3. Transition CSS3 : dimensions. Transition CSS3 background et color. Menu animé en CSS. Menu animé en CSS. Principe général : Ce menu est structuré sous forme de liste (ul, li) contenant un image (img) ainsi qu'une sous-liste indiquant le détail de chaque élément.
Les éléments de liste sont dimensionnés (largeur et hauteur de 200px) et disposés horizontalement à l'aide de la règle "display: inline-block". Note : il eût été possible de positionner ces éléments en flottant, à condition d'affecter un "clear: both" aux élément suivants. Le comportement au survol est géré via le module Transition de CSS3 et en utilisant les propriétés transition-property, transition-duration et transition-timing-function Chaque image est positionné en absolu, pour masquer le texte par défaut, puis l'effet est d'appliquer un padding-left à l'image. Compatibilité : Fonctionne sur les moteurs webkit (Safari et Chrome).
Ne fonctionne pas encore sur Firefox (pas de transition), mais c'est prévu pour la prochaine version 3.6 Droits d'auteur : CSS transitions. Slideshow en CSS3. Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web.
Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable.
Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Voir l'exemple. Webdesign And Slideshow With CSS3. Slideshow en CSS3. Un slideshow automatique grâce aux keyframes Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;) Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes.
Le principe est relativement simple, nous allons reprendre notre toute première version du slideshow précédent, lui retirer les deux liens et ajouter un élément pour bien visualiser les transitions. Notre CSS va ensuite définir une animation par images-clefs. Cela va se dérouler comme sur une ligne de temps (timeline pour les intimes de Flash) allant de 0% à 100%. Dans un premier temps nous annonçons l'utilisation des keyframes. Une autre manière d'écrire cette même animation serait celle-ci: Cette syntaxe permet de gagner en place en regroupant les points d'étape.
(Astuce) Empêcher le scroll avec l’utilisation de :target - Désactiver le scroll lors du clic vers une ancre en CSS. Si vous avez essayé d’utiliser la pseudo-classe :target, présente dans la spécification CSS3, et que vous avez voulu reproduire l’une des nombreuses démos que l’on trouve sur internet, comme par exemple : Vous vous êtes confrontés au problème du scroll de la page si le contenu est plus grand que la hauteur de votre écran !
Et cela est tout à fait normal. Il n’existe pas de façon "propre" pour empêcher ce comportement. Comment contrer ce problème ? ~ (CSS3) - Apprendre le CSS.