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

Vincent De Oliveira · W3Café 2012

Vincent De Oliveira

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
Methode d'interpolation des transitions CSS

transition-timing-function

  • cubic-bezier
    • Définit une courbe avec 4 "points"
Courbe de bezier pour les transitions CSS

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

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

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

Les filtres CSS

Filtres CSS

  • Raccourcis
  • Filtres SVG classiques
  • Shaders

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

Atelier 8

Casse tête

Galerie automatique

Merci.

Vincent De Oliveira · @iamvdo