Exporter (0) Imprimer
Développer tout

Comment donner vie à votre page Web à l’aide d’animations, de transitions et de transformations CSS

Internet Explorer 10 (et les applications du Windows Store en JavaScript) ajoute à la prise en charge des transformations 2D CSS (Cascading Style Sheets), introduites dans Internet Explorer 9, la prise en charge des transformations 3D CSS, des transitions CSS et des animations CSS.

Introduction

Les transformations 2D et 3D CSS vous permettent de manipuler les éléments de votre site Web de façons beaucoup plus intéressantes et flexibles que ce que le balisage CSS permettait auparavant. Cette spécification fournit une prise en charge pour la rotation, la translation, la mise à l’échelle et l’inclinaison (ainsi que les transformations et compositions arbitraires de plusieurs transformations). Associées à la capacité à manipuler des éléments dans l’espace 3D, à changer le centre de projection et à affecter l’origine des transformations, les transformations CSS sont très puissantes, bien qu’elles puissent paraître quelque peu intimidantes au premier abord aux non-initiés.

Les transitions et animations CSS peuvent être utilisées avec les transformations CSS pour donner vie à votre contenu Web. De plus, comme elles s’exécutent de façon asynchrone avec les scripts dans Internet Explorer 10, elles offrent une alternative beaucoup plus rapide aux animations en JavaScript. Les transitions CSS représentent une manière relativement directe d’animer des éléments d’un état à un autre. Les animations CSS sont plus flexibles que les transitions CSS et proposent un contrôle plus affiné de la façon dont un élément change au fil du temps, ainsi que la capacité à définir des états intermédiaires.

Ces fonctionnalités sont exposées par le biais de plusieurs propriétés CSS et événements JavaScript nouveaux, qui sont tous définis par leur spécification W3C (World Wide Web Consortium) correspondante. Les informations fournies ici font office d’introduction à ces nouveaux concepts et vous permettent d’intégrer ces derniers de façon transparente dans votre site Web. Nous fournirons une vue d’ensemble des transformations CSS (2D et 3D), des transitions CSS et des animations CSS, avec leurs composants clés. Vous verrez de nombreux exemples d’utilisation de ces technologies.

Remarque  Cette section contient des illustrations statiques et des liens vers des exemples pratiques des technologies abordées. Pour obtenir de meilleurs résultats, consultez ces exemples à l’aide d’un navigateur qui prend en charge les transformations, les transitions et les animations CSS, tel qu’Internet Explorer 10. En outre, ces fonctionnalités font l’objet d’une accélération matérielle dans Internet Explorer 10, si bien qu’elles utilisent le matériel vidéo de votre ordinateur pour traiter les effets de façon fluide et rapide.

Dans cette section

RubriqueDescription

Transformations CSS en 2D et 3D

Les transformations CSS vous permettent de transformer des éléments dans un espace à deux dimensions ou à trois dimensions.

Transitions CSS

Les transitions CSS vous permettent de créer des animations simples en modifiant de façon fluide les valeurs des propriétés CSS au cours d’une période de temps donnée.

Animations CSS

Les animations CSS vous permettent de faire plus que simplement modifier de façon fluide les propriétés CSS au fil du temps (les transitions CSS font déjà cela). Elles vous permettent également de concevoir des animations complexes à l’aide de trames clés, ainsi qu’un contrôle plus affiné par le biais des scripts.

 

 

 

Afficher:
© 2014 Microsoft