Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES ANIMATIONS EN CSS

Présentation des animations en CSS

Les animations en CSS vont nous permettre de changer le style d’un élément HTML.

Contrairement aux transitions, on va pouvoir grâce aux animations modifier le style d’un élément HTML sans changement d’état de celui-ci et autant de fois que voulu.

Les animations sont une fonctionnalité relativement récente du CSS. Ainsi, la compatibilité avec d’anciennes versions de navigateurs n’est pas parfaite et nous allons devoir utiliser des préfixes vendeurs.

A noter qu’Internet Explorer, dans ses versions antérieures à la version 10, ne supporte tout simplement pas les animations.

Pour créer une animation en CSS, nous allons utiliser la propriété animation ainsi que la règle CSS @keyframes.

La règle CSS @keyframes et la propriété animation

On appelle @keyframes une « règle » en CSS, qui va nous permettre de modifier progressivement le style d’un élément.

La propriété CSS animation est en fait la notation short-hand des propriétés relatives aux animations suivantes :

  • animation-name : nom de l’animation, qu’on réutilisera dans la déclaration du @keyframes ;
  • animation-duration : durée de l’animation, en secondes ;
  • animation-timing-function : courbe de vitesse de l’animation ;
  • animation-delay : délai de l’animation ;
  • animation-iteration-count : nombre de fois que l’animation doit être jouée ;
  • animation-direction : spécifie si l’animation doit se jouer à l’envers ou selon des cycles alternés, c’est-à-dire en changeant de sens à chaque fois.

Parmi toutes ces propriétés, seules les valeurs relatives aux deux premières doivent obligatoirement être précisées dans la propriété CSS animation.

Cependant, je vous conseille ici plutôt d’utiliser les propriétés animation-xx plutôt que la notation short hand car cette dernière n’est pas toujours bien supportée par tous les navigateurs.

Voyons immédiatement quelques exemples d’animations qu’il est possible de créer uniquement grâce à la propriété CSS animation.

Créer une animation simple en CSS

Commençons par créer une animation très simple en CSS : on va tout simplement changer la couleur d’un div, du bleu vers l’orange.

On va créer une animation simple en CSS

On utilise la propriété animation et @keyframes

Essayer ce code

N'hésitez pas à essayer le code ci-dessus afin de voir le résultat final.

Comme vous pouvez le voir, on applique notre animation à notre élément div. On se contente ici d’utiliser les propriétés animation-name et animation-duration. Pensez bien une nouvelle fois à préciser la propriété préfixée avant la version standard de celle-ci.

Ensuite, on réutilise le nom de notre animation dans notre @keyframes qu’il faut également préfixer pour s’assurer un fonctionnement correct sur différents navigateurs.

A l’intérieur du @keyframes, le plus simple est d’utiliser les mots clefs « from » et « to » pour indiquer, dans notre cas, la couleur de départ et de fin d’animation.

On peut également préciser des pourcentages plutôt que « from » et « to » afin de gérer plusieurs changements d’état et de préciser quand ceux-ci doivent survenir durant notre ainmation.

Notez qu’une fois notre animation terminée un élément reprend son style d’origine.

Créer une animation complète en CSS

On va maintenant tenter de créer une animation plus complète pour notre div, avec les différentes propriétés animation-xx.

On va faire changer notre div de couleur plusieurs fois dans notre @keyframes en précisant des valeurs en pourcentage.

On va également faire bouger notre div dans notre page en lui attribuant une position relative puis en modifiant celle-ci dans notre @keyframes.

Création d’une animation complexe en CSS

Essayer ce code

Ici, nous commençons par définir la taille, une couleur de fond par défaut et le positionnement de notre div.

Ensuite, nous lui appliquons les propriétés animation-name, animation-duration, animation-iteration-count et animation-direction.

La propriété animation-iteration-count va définir combien de fois notre animation va être jouée. Elle prend en valeur soit un nombre, soit un mot clef comme « infinite » (l’animation sera répétée indéfiniment).

La propriété animation-direction va définir le sens de l’animation. Notre animation peut aller en sens inverse (valeur reverse), en cycles alternatifs (une fois à l’endroit, une fois à l’envers avec la valeur alternate) ou encore en cycles alternatifs inversés.

Finalement, nous utilisons notre @keyframes pour préciser la nature de notre transition et lui donner un effet fluide. Comme prévu, nous utilisons des valeurs en pourcentage pour définir à quel moment dans l’animation doit commencer chaque nouvel effet et attribuons les pourcentages souhaités à chaque effet d'animation.

Dans le cas présent, nous changeons la couleur de fond du div à chaque fois ainsi que sa place relativement à sa place de départ.

N’hésitez pas à essayer ce code avec le lien ci-dessus afin de bien comprendre comment il fonctionne !

Chapitre précédent

Chapitre suivant