CSS3: Transitions, Animations,Transformations, et plus si affinités...

Vincent De Oliveira · W3Café 2012

CSS3 n'existe pas!

• C'est la suite logique au langage CSS, le langage des feuilles de styles.

CSS1

• Recommandation en 1996
• Sélecteurs simples, positionnements basiques, tailles, marges, couleurs, polices, etc.

CSS2

• Abandonnée en 1998
• Trop de choses, trop complexes ou sous-spécifiées
• Pseudo-classes dynamiques, pseudo-éléments, polices personnalisées, gestion des médias, ombres sur les textes, etc.

CSS3 n'existe pas!

CSS2.1

• Version "corrigée" de CSS2
• Recommandation en juin 2011
• Ce qui a été retiré est mis à l'étude dans CSS3

CSS3

• En cours depuis 1999
• Standard fragmenté en modules
• 3 modules en Recommandation, une trentaine à l'étude

CSS4

• Certains modules en cours...

Démocratisation de CSS3

Pourquoi entends t'on beaucoup parler de CSS3?

• Meilleur ami de HTML5
• Sélecteurs étoffés
• Effets graphiques simplifiés: opacité, angles arrondis, ombres, dégradés, polices personnalisées, etc.
• Support des navigateurs amélioré de CSS2.1
  • Fin de IE6, IE7
• Accès à ce qui était réservé avant à JavaScript (interaction, animation, etc.)

Utiliser CSS3 en 2012?

Oui! Avec précaution.

• Connaitre l'état d'avancement des modules
• Conserver la dégradation gracieuse
• Mettre en place l'amélioration progressive

Pour cela:

• Ne rien faire
• Utilisation des préfixes: -webkit-,-moz-,-ms- et -o-
• Utilisation de styles alternatifs, via la cascade CSS.
• Détection de fonctionnalités (requiert JS)

Atelier 1

Création d'un menu de navigation

Le menu à reproduire

Étape 1: Structure et styles de bases

<ul>
    <li><a href="#1">Home</a></li>
    <li><a href="#2">Portfolio</a></li>
    <li><a href="#3">News</a></li>
    <li><a href="#4">Labs</a></li>
    <li><a href="#5">Contact</a></li>
</ul>

ul{
    display: table;
    width: 500px;
    margin: 50px auto;
    padding: 0;
    font: 1.1em sans-serif; 
}
ul li{
    display: table-cell;
    background: dodgerblue;
}

Étape 2: Coins arrondis

border-radius: 10px;

• Crée des coins arrondis
• Chaque angle peut avoir son propre arrondi
  • ex: border-radius: 0 10px 2px 20px;
• Accepte les pourcentages (par rapport à la boite elle-même)
  • ex: border-radius: 50%; crée un rond

Étape 2: Coins arrondis

ul{
    border-radius: 3px;
}

Étape 3: Les ombres

text-shadow: 2px 2px 5px black;

• Ajoute une (ou plusieurs) ombre(s) sur le texte

box-shadow: 2px 2px 5px (5px) black (inset);

• Ajoute une (ou plusieurs) ombre(s) sur une boite
• L'ombre peut être interne: inset
• L'ombre peut être plus grande ou plus petite (4^ème valeur numérique)

Étape 3: Les ombres

ul{
    ...
    box-shadow: 0 1px 3px rgba(0,0,0,.3),
                0 5px 10px rgba(0,0,0,.25),
                0 20px 20px rgba(0,0,0,.15); 
}

Étape 4: Les dégradés

linear-gradient((to left), red, green);

• Crée un dégradé linéaire
• La direction est optionnelle. La valeur par défaut est to bottom
• Nombre de couleurs "illimité"
• Positionnement des color-stops automatiques/manuels

Utilisation

• Préfixes obligatoires (mais doivent être retirés bientôt)
• Syntaxe avec to très peu supportée

Étape 4: Les dégradés

ul li{
    ...
    background: dodgerblue;
    background: -webkit-linear-gradient(deepskyblue,dodgerblue);
    background:    -moz-linear-gradient(deepskyblue,dodgerblue);
    background:     -ms-linear-gradient(deepskyblue,dodgerblue);
    background:      -o-linear-gradient(deepskyblue,dodgerblue);
    background:         linear-gradient(deepskyblue,dodgerblue);
}

• Pensez à la dégradation gracieuse.

Étape 5: Transparence

background: rgb(235, 162, 53);
opacity: 0.5;

• Rends l'élément transparent (et tous les enfants)

background: rgba(235, 162, 53, 0.5);

• Rends la couleur appliquée transparente
• Extension de rgb(r,v,b) avec l'alpha
• Existe également hsl(t,s,l) et hsla(t,s,l,a)

Étape 5: Transparence

ul li a{
    ...
    color: black;    
    color: rgba(0,0,0,.7);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,32%) inset,
                0 -2px 0 hsl(210,100%,38%) inset,
                0 -3px 0 hsl(210,100%,44%) inset,
                0 -4px 0 hsl(210,100%,50%) inset,
                0 -5px 0 hsl(210,100%,60%) inset;
}
ul li a:hover,
ul li a:focus{
    background: #51c3fa;
    background: rgba(255,255,255,.2);

    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,42%) inset,
                0 -2px 0 hsl(210,100%,48%) inset,
                0 -3px 0 hsl(210,100%,54%) inset,
                0 -4px 0 hsl(210,100%,60%) inset,
                0 -5px 0 hsl(210,100%,70%) inset; 
}
ul li a:active{
    background: #09c;
    background: rgba(0,0,0,.15);
    background: -webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:      -o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:         linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}

• Pensez à la dégradation gracieuse.

Code complet

ul{
    ...
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3),
                0 5px 10px rgba(0,0,0,.25),
                0 20px 20px rgba(0,0,0,.15); 
}
ul li{
    ...
    background: dodgerblue;
    background: -webkit-linear-gradient(deepskyblue,dodgerblue);
    background:    -moz-linear-gradient(deepskyblue,dodgerblue);
    background:     -ms-linear-gradient(deepskyblue,dodgerblue);
    background:      -o-linear-gradient(deepskyblue,dodgerblue);
    background:         linear-gradient(deepskyblue,dodgerblue);
}
ul li:first-child,
ul li:first-child a{
    border-radius: 3px 0 0 3px;
}
ul li:last-child,
ul li:last-child a{
    border-radius: 0 3px 3px 0;
}
ul li a{
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 8px 8px 17px 8px;
    
    color: black;    
    color: rgba(0,0,0,.7);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,32%) inset,
                0 -2px 0 hsl(210,100%,38%) inset,
                0 -3px 0 hsl(210,100%,44%) inset,
                0 -4px 0 hsl(210,100%,50%) inset,
                0 -5px 0 hsl(210,100%,60%) inset;
}
ul li a:hover,
ul li a:focus{background: rgba(255,255,255,.2);padding:8px 25px 17px 25px;

    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,42%) inset,
                0 -2px 0 hsl(210,100%,48%) inset,
                0 -3px 0 hsl(210,100%,54%) inset,
                0 -4px 0 hsl(210,100%,60%) inset,
                0 -5px 0 hsl(210,100%,70%) inset; 
}
ul li a:active{
    background: rgba(0,0,0,.15);
    background: -webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:      -o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:         linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}

Compatibilité

Les transitions CSS

C'est quoi une transition?

• Animer une propriété d'une valeur A à une valeur B, lors d'un changement d'état.
  • Pseudo-classes (:hover, :focus, etc.)
  • Modification via JS (ajout de classe)
  • Chargement de la page (?)

Utilisation

transition: width 2s ease;

• 5 propriétés:
  • transition-property: propriété à animer
  • transition-duration: durée de la transition
  • transition-delay: retardement de la transition
  • transition-timing-function: méthode d'interpolation
  • transition: propriété raccourcie
• Les préfixes sont obligatoires!

transition-timing-function

• 5 méthodes:
  • linear: linéaire
  • ease: départ rapide, arrivée lente (défaut)
  • ease-in: départ lent
  • ease-out: arrivée lente
  • ease-in-out: départ lent, arrivée lente

transition-timing-function

• cubic-bezier
  • Définit une courbe avec 4 "points"

Compatibilité

Atelier 2

Ajout de transition sur un menu

Le menu à reproduire

Identique à l'atelier précédent, mais avec l'ajout des transitions

Ajoutez les transitions

• Sur les éléments au changement d'état (:hover, :focus)

ul li a:hover,
ul li a:focus{
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
        -ms-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;  
}

• Problème: pas de transition lors du retour à l'état normal.

Ajoutez les transitions

• Sur les éléments avant changement d'état

ul li a{
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
        -ms-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;  
}

• Transitions dans les 2 cas (changement d'état et retour état initial)

Modifiez les transitions

• Transitions sur élément initial ET sur changement d'état
  • 2 transitions différentes
  • Différence: propriété, durée, délai, interpolation

ul li a{
    transition: all .3s .1s;  
}
ul li a:hover{
    transition: padding .3s cubic-bezier(.5,4,.5,.8) 0s,
                background .3s cubic-bezier(.5,4,.5,.8) 0s;  
}

Aller plus loin

• Spécification W3C: Module Transitions
• Apprendre les transitions sur CSS3Create
• Démos utilisant les transitions:
  • Navigation avec effet de slide
  • Effet de survol avec transition
  • Menu en CSS style Lavalamp (Firefox)

Les animations CSS

C'est quoi une animation?

• Plusieurs transitions qui s'enchainent
• Chaque changement de valeur est défini sous forme d'étape, avec les @keyframes
• 2 actions nécessaires:
  • Création des étapes-clés
  • Utilisation de l'animation créée

Création

@keyframes nomAnim{
   from{ ... }
   40% { ... }
   to  { ... }
}

• Définit 3 étapes, soit 2 transitions
• Revient à l'état initial une fois l'animation terminée
• Les préfixes sont obligatoires!

Utilisation

animation: nomAnim 2s ease 5;

• 8 propriétés:
  • animation-name: nom de l'animation utilisée
  • animation-duration: durée de l'animation
  • animation-delay: retardement de l'animation
  • animation-direction: joue l'animation en sens inverse
  • animation-iteration-count: nombre de répétition
  • animation-timing-function: méthode d'interpolation
  • animation-fill-mode: état de l'animation avant et après celle-ci
  • animation: propriété raccourcie
• Les préfixes sont obligatoires!

Compatibilité

Atelier 3

Formulaire avec lueur qui scintille

Le formulaire

A vous de faire mieux!

Code complet de base

<form action="#" method="get">
    <p><label for="inpNom">Nom:</label><input type="text" id="inpNom" /></p>
    <p><label for="inpPrenom">Prénom:</label><input type="text" id="inpPrenom" /></p>
</form>

html{
    font: 1em sans-serif;
    height: 100%;

    background: #beced4;
    background: -webkit-linear-gradient(#beced4,#e4f0f5);
    background:    -moz-linear-gradient(#beced4,#e4f0f5);
    background:     -ms-linear-gradient(#beced4,#e4f0f5);
    background:      -o-linear-gradient(#beced4,#e4f0f5);
    background:         linear-gradient(#beced4,#e4f0f5);
}
form{
    text-align: center;
    margin: 100px auto;
}
form p{
    height: 30px;
}
label{
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 80px;
    height: 23px;
    padding: 7px 0 0 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    
    border-radius: 5px 0px 0px 5px;
    box-shadow: 0px 1px 1px rgba(0,0,0,1) inset;
    background: #09c;
    background: -webkit-linear-gradient(#51c3fa,#09c);
    background:    -moz-linear-gradient(#51c3fa,#09c);
    background:     -ms-linear-gradient(#51c3fa,#09c);
    background:      -o-linear-gradient(#51c3fa,#09c);
    background:         linear-gradient(#51c3fa,#09c);
    
}

input{
    display: inline-block;
    width: 265px;
    height: 30px;
    padding: 0 0 0 10px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    color: white;
    text-shadow: 0px 1px 0px #000;
    background: #666;
    background: rgba(0,0,0,.6);
    border-radius: 0px 5px 5px 0px;
    box-shadow: 0px 1px 1px #000 inset;
}
input:focus{
    outline: none;
    box-shadow: 0px 0px 3px #000;  
    background: rgba(0,0,0,.9);
}

Création de l'animation

@keyframes pulse{
    from {
        box-shadow: 0 0 0px deepskyblue;
    }
    to   {
        box-shadow: 0 0 14px deepskyblue;
    }
}

• Ne pas oublier les préfixes: @-webkit-keyframes, @-moz-keyframes, @-ms-keyframes et @-o-keyframes

Utilisation de l'animation

input:focus{
    -webkit-animation: pulse 1s infinite alternate;
       -moz-animation: pulse 1s infinite alternate;
        -ms-animation: pulse 1s infinite alternate;
         -o-animation: pulse 1s infinite alternate;
            animation: pulse 1s infinite alternate; 
}

• L'animation équivaut à:
  • animation-name: pulse;
  • animation-duration: 1s;
  • animation-iteration-count: infinite;
  • animation-direction: alternate;

Atelier 4

Galerie photo à défilement automatique

La galerie

Attention à l'accessibilité de cette galerie.

Indices

• Liste d'images
• Modèle de boite tabulaire
• Fenêtre parent sans débordement
• Animation de la liste avec margin-left
• Pas forcément automatique (retour au début)

Aller plus loin

• Spécification W3C: Module Animations
• Apprendre les animations sur CSS3Create
• Démos utilisant les animations:
  • Icone de préchargement
  • Effet de rebond sur une image
  • Galerie photo en boucle

Les transformations CSS

Quelles transformations?

• Transformations classiques 2D
  • Rotation, translation, échelle, inclinaison, matrice
• Transformations 3D
  • Rotation 3D, translation 3D, échelle 3D, matrice 3D
  • Notion de perspective

Utilisation de la 2D

transform: rotate(45deg) translate(50px);

• Ici: rotation de 45 degrés, translation X de 50px
• Les fonctions:
  • rotate()
  • translate(), translateX(), translateY()
  • scale(), scaleX(), scaleY()
  • skewX(), skewY()
  • matrix()
• Les préfixes sont obligatoires!

Origine de la transformation

transform-origin: 50% 0;

• Ici: origine en haut, au centre
• Les préfixes sont obligatoires!

Compatibilité

Atelier 5

Effet éparpillé de photo Polaroid

La galerie

Code de base

ul{
    display: table;
    width: 720px;
    margin:70px auto;
}
ul li{
    display: table-cell;
    width: 180px;
    height: 205px;
    text-align: center;
    vertical-align: middle;
}
ul li img{
    width: 150px;
    height: auto;
    border: 5px solid white;
    border-bottom-width: 20px;
    box-shadow: 0 0 5px black;
}            

Transformations uniques par images

Utilisation de la pseudo-classe :nth-child

ul li:nth-child(1) img{
    transform: rotate(-8deg) scale(1.1);
}
ul li:nth-child(2) img{
    transform: rotate(2deg);
}
ul li:nth-child(3) img{
    transform: rotate(-8deg) scale(1.3);
}
ul li:nth-child(4) img{
    transform: rotate(10deg);
}            

Ne pas oublier les préfixes!

Transformation + Animation = Full power!

Atelier 6

Effet d'oscillation sur logo

L'effet au survol/focus

Indices

• L'animation a 10 étapes (10%)
• Au départ, on recule l'image avec une légère rotation
• A chaque changement d'étape, on fait osciller
• Au final, plus de transformations

Utilisation de la 3D

transform: rotateX(45deg) translateZ(50px);

• Ici: rotation axe X de 45 degrés, translation Z (profondeur) de 50px
• Les fonctions:
  • rotateX(), rotateY(), rotateZ(), rotate3d()
  • translateZ(), translate3d()
  • scaleZ(), scale3d()
  • matrix3d()
• Les préfixes sont obligatoires!

Notion de perspective 3D

perspective: 500px;

• Permet le rendu de la scène 3D
  • A utiliser sur un parent
• Petite perspective = proche de l'écran = forte impression 3D
• Grande perspective = loin de l'écran = faible impression 3D
• Les préfixes sont obligatoires!

Autres propriétés liées à la 3D

transform-style: flat|preserve-3d;

• Force la propagation de la 3D
• La valeur par défaut est flat
• Les préfixes sont obligatoires!

backface-visibility: visible|hidden;

• Visibilité des faces arrières
• La valeur par défaut est visible
• Les préfixes sont obligatoires!

Compatibilité

Atelier 7

Animation CSS de panneau en 3D

L'effet à réaliser

Indices

• Définition de la perspective
• Création de l'animation
  • Au départ, positionnement de chaque bloc à l'horizontal
  • Oscillation
  • Au final, devant nous!
• Lancement de l'animation retardée pour chaque bloc

Aller plus loin

• Spécification W3C: Module Transforms
• Apprendre les transformations 2D et 3D sur CSS3Create
• Démos utilisant les animations:
  • Rotation d'un menu en CSS3 [2D]
  • Infobulle [2D]
  • Panorama CSS [3D]

Les filtres CSS

Filtres CSS

• Raccourcis
• Filtres SVG classiques
• Shaders

• Filter Effects 1.0 (décembre 2011)

Filtres raccourcis

filter: blur(5px)

• 10 fonctions
  • grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur, drop-shadow

• D'autres bientôt...
  • halftone, motion-blur, posterize, bump, affine-transform, bloom, gloom, mosaic, displace, edge-detect , pinch, twirl

Compatibilité

Atelier 8

Galerie photo avec effet de profondeur

La galerie

Attention à l'accessibilité de cette galerie.

Indices

• Positionnement des images
• Ajout transformation au survol
• Ajout transition pour effet progressif
• Ajout filtres
• Plus d'infos sur les filtres CSS

Les masques CSS

Masques CSS

Masques CSS

• Image composée de pixels et de transparence
• Même fonctionnement que background-image
  • Image classique, dégradés CSS
• Pas une spécification CSS
• Compatible dans Webkit (Chrome 4, Safari 4, iOS 3.2, Android 2.1): -webkit-mask

Masques SVG (sur éléments HTML)

• balise mask SVG
• Compatible dans Firefox 3.5

Masque

Aller plus loin

• CSS Masks sur Surfin' Safari
• -webkit-mask-* sur MDN

Atelier 8

Casse tête

Galerie automatique