CSS3 Animation et Transition : 20+ exemples et tutoriels

Voici une sélection de 20 animations CSS3 en 3D et 2D. L'objectif de cet article est de vous présenter le potentiel du module CSS3 transition pouvant être utilisé en substitut du Javascript et du Flash.

CSS3 Animation et Transition : 20+ exemples et tutoriels - Magazine du Webdesign

Les transitions CSS3 permettent de modifier les valeurs des propriétés CSS spontanément au cours d’une période donnée. Cela offre à l’utilisateur une expérience unique de navigation et d’interaction avec l’application Web sans alourdir cette dernière avec des surcouches JS ou Flash. De plus en plus utilisées en Webdesign, les animations CSS3 sont également de mieux en mieux supportées par les navigateurs Web modernes (Chrome, FF, Opéra, etc.).

Alors n’attendez plus, partez à la découverte de notre fabuleuse sélection d’animations CSS3. En prime, certains exemples ci-dessous détaillent avec précision le fonctionnement des animations et des transitions CSS3 en vous fournissant le code source.

Animation de personnages en CSS3

2-Reverend-Danger

Typographie animée via les -webkit-animation

3-Kind-of-a-big-deal

Un menu fun

4-This-is-my-website-Joe-Barrett-Graphic-Designer-Web-Designer-Enthusiast-of-things-Minnesota

Des animations de paysages en CSS3, la fumée est sympa

From-the-Front-2012--The-Treasure-of-FrontEnd-Island-Front-End-Conference

Festival Rock de Calvi, des mouvements CSS3 et de la chaleur

1-Calvi-on-the-Rocks---Dixième-édition-6-au-11-juillet-2012

Un générateur de texte en 3D

5-CSS3D---CSS3-3D-Text

Une map interactive

6-Scale---MapBox

The expressive web

7-HTML5-and-CSS3---Adobe---The-Expressive-Web---Beta

Animer une barre de navigation en CSS3

8-Creative-CSS3-Animation-Menus

Logo Dribbble animé

9-Dribbble

Expériences interactives d’Andrew Hoyer

10-Andrew-Hoyer---Simple-Fractals

The Planetarium

12-The-Planetarium

The man from Hollywood

13-The-Man-From-Hollywood

Space

14-CSS3-Animation-Demo-for-Firefox-5-by-Anthony-Calzadilla

Make the Web move with CSS3 animations

15-CSS3-Animation-Demo-for-Firefox-5-by-Anthony-Calzadilla

Découvrir le système solaire

16-Our-Solar-System-An-experiment-with-CSS3-border-radius-transforms-animations

Kinect, Css3 & Animatable.com

17-CSS-Tricks

CSS 3D bar graph

18-Pure-CSS-3D-Bar-Graph

CSS3 graph animation

19CSS3-Graph-Animation

3D gallery

20-CSS3-Image-Gallery-with-a-3D-Lightbox-Animation

CSS3 transitions example : Polaroid scale and rotate

21-HTML5-snippet---CSS3-transitions-example---Polaroid-scale-and-rotate

Oceanhealthindex.org

Ocean Health Index

Par Guillaume Palayer Un chasseur-cueilleur et un curieux avant tout des dernières avancées du monde des Internets. Fondateur du Magazine du Webdesign, un blog-cerveau à propulsion humaine, ayant pour mission de faire le tri dans le bruit du Web afin de proposer les meilleurs contenus à la communauté du Magazine du Webdesign.

Inscrivez-vous à la newsletter du Magazine du Webdesign

Inscrivez-vous à notre newsletter afin de recevoir chaque mois une sélection des meilleurs articles et ressources.

Designmodo Shop

Commentaires (6)

  1. Ping : CSS3 Animation et Transition : 20+ exemples et tutoriels | Webdesign et développement Web | Scoop.it

  2. Ping : CSS3 Animation et Transition : 20+ exemples et tutoriels | Webdesign et magie des Internets | Scoop.it

  3. Ping : CSS3 Animation et Transition : 20+ exemples et tutoriels | CSS3byFlo | Scoop.it

  4. Ping : CSS3 Animation et Transition | HTML5 and CSS3 | Scoop.it

  5. Ping : CSS3 Animation et Transition : 20+ exemples et tutoriels | Bonnes Pratiques Web | Scoop.it

Laisser un commentaire

Yep, vous souhaitez poster un commentaire... complétez les trois champs ci-dessous. Pas de spams, protégeons les Internets.

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

↑ Haut de page