.design .design

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.

.design
.design

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

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer