CSS

Le code CSS est un langage dit descriptif. Non obligatoire bien qu’essentiel sur une page web, il a pour but de mettre en forme et d’animer des balises HTML. Son but est uniquement visuel, à contrario du HTML qui a un but sémantique.

Voyons dans cet article comment animer une page HTML avec le CSS

Sommaire

Présentation

Il existe plus d’effets que ceux présentés ici. Vous pouvez par exemple en trouver d’autres sur OpenClassRooms .

Les pseudo classes

Les pseudo-classes (link, visited, hover, active) sont des mots clés. Placés après les sélecteurs de balises, ils activent le code CSS associé en fonction d’événements particuliers.

Certaines pseudo-classes ne sont utilisables que pour les liens (balise a) :

:link : état du lien par défaut
:visited : état du lien déjà visité

D’autres pseudo-classes sont utilisables par plus de balises :

:active : bloc cliqué
:focus : bloc actif (exemple : formulaire dans lequel on tape une information)
:hover : bloc survolé

D’autres pseudo-classes existent (enabled, checked, disabled, …)

Le visuel lors du passage d’un état à un autre se fait brusquement par défaut. Il est possible d’adoucir le changement avec des transitions.

Attention, certaines pseudo-classes, si elles sont appliquées au même sélecteur, doivent être placées dans l’ordre suivant :link, :visited, :hover, :active.

Les transitions

Les propriétés CSS de transitions permettent le changement progressif d’un bloc entre 2 événements perçus à l’aide des pseudo-classes. Ils sont placés de préférence dans le sélecteur sans pseudo-classe (donnant la configuration CSS d’origine) :

transition : Propriété raccourci
transition-property: color : Permet de définir les propriétés CSS sur lesquels agir
transition-duration: 1s : durée de la transition
transition-timing-function: ease : type de transition avec les options :
- ease : rapide au début et ralenti à la fin.
- linear : vitesse constante.
- ease-in : lent au début, puis accélère.
- ease-out : rapide au début, puis ralentit.
- ease-in-out : départ et fin lents.

Les propriétés CSS de transformation sont notamment utiles pour accompagner les transitions

transform: rotate(10deg) : Tourne le bloc
transform: scale(0.5, 0.5) : Redimensionne le bloc
transform: translate(30px, 90px) : Déplace le bloc
transform: skewX(20deg) : Penche le bloc sur x
transform: skewX(20deg) : Penche le bloc sur y

Les keyframes

Les keyframes permettent la réalisation d’animations complexes d’un état à un autre. Pour cela, on utilise la propriété CSS animation associée à une directive CSS @keyframe à l’aide d’un nom :

animation-name : Nom de la @keyframe à utiliser
animation-duration : Durée de l’animation
animation-timing-function : voir transition-timing-function
animation-delay : Délai de lancement de l’animation (peut être négatif)
animation-iteration-count : Nombre de répétitions (infinite possible)
animation-direction : Sens de l’animation (normal, alternate, reverse)
animation-fill-mode : Position après l’animation (none, forwards, backwards)
animation : Propriété raccourci

Exemples

Les pseudo-classesLes transitions 1Les transitions 2Les transitions 3Les keyframes

<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>J'anime mes blocs</title>
		
		<style>
            a         { color: black;  }   /* Bloc sans évènement        */
			a:link    { color: blue;   }   /* Bloc avec lien non visités */
			a:visited { color: purple; }   /* Bloc avec liens visités    */
			a:hover   { color: yellow; }   /* Bloc survolé               */
			a:active  { color: red;    }   /* Bloc cliqué                */
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<p>
			<a href="http://example.com">Ceci est un lien</a>
		</p>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>J'anime mes blocs</title>
		
		<style>
			p{
				color: black;
				background-color: white;
				
				/* Les transitions agissent dans les 2 sens quand */
				/* elles sont mises dans un sélecteur sans pseudo-classe */
				transition-property: color background-color;
				transition-duration: 1s;
			}
			p:hover
			{
				color: yellow;
				background-color: red;
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<p>
			Ceci est une phrase exemple
		</p>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>J'anime mes blocs</title>
		
		<style>
			p{
				background-color: blue;
				width: 200px;
				
				transition-property: transform;
				transition-duration: 1s;
				padding-left: 0px;
			}
			p:hover
			{
				transform: translateX(50px);
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<p>Ceci est une phrase exemple</p>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>J'anime mes blocs</title>
		
		<style>
			p{
				opacity: 1;
				background-color: blue;
				border: solid;
			}
			div{
				background-color: transparent;
				width: 200px;
				
				transition-property: padding-left;
				transition-duration: 1s;
				padding-left: 0px;
			}
			div:hover
			{
				padding-left: 50px;
			}
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<div>
			<p>Ceci est une phrase exemple</p>
		</div>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr"> 

	<!-- Ce bloc gère l'entête de la page web --> 
    <head> 
        <meta charset="utf-8" /> 
        <title>J'anime mes blocs</title>
		
		<style>
			@keyframes mon_anime
			{
				/* On peut remplacer 0% par from */
				0% {
					transform: translateX(0px);
				}

				70% {
					transform: translateX(150px);
				}
				
				/* On peut remplacer 100% par to */
				100% {
					transform: translateX(150px) rotate(30deg);
				}
			}
			
			p{
				background-color: blue;
				width: 200px;
				
				animation-name: mon_anime;
				animation-duration: 2s;
				animation-direction: normal;
				animation-iteration-count: 3;
			}
			
        </style>
    </head>
	
	<!-- Ce bloc gère le contenu de la page web --> 
    <body>
		<p>Ceci est une phrase exemple</p>
    </body>
</html>