ICTFF Section Informatique

Il existe trois façons d'animer des éléments html: les transitions, les transformations et les animations.

Introduction

Il s'agit d'appliquer des transitions sur des modifications de propriétés CSS.
On ajoute une transition entre 2 états.

Les transitions ne sont pas applicables à toutes les propriétés CSS, seules les propriétés numériques (taille, opacité, positionnement, couleur) sont susceptibles de subir des transitions. Inutile d'espérer une transition entre deux polices de caractères.

Attention: les propriétés de transitions sont appliquées à l'état normal de l'élément.

Pour appliquer une transition il suffit de préciser les propriétés qu'on veut faire évoluer et le temps que doit durer cette transition.

Les propriétés

transition-property

La propriété transition-property permet de spécifier les propriétés (1 ou plusieurs) CSS ciblées.

transition-property : background, width, color;	3 propriétés ciblées
transition-property : all;	toutes les propriétés ciblées
transition-property : none;	aucune propriété ciblée

transition-duration

La propriété transition-duration permet de spécifier la durée de la transition. L'ordre des durées compte et correspond à celui des autres propriétés.

transition-duration : 1s, 0.5s, 300ms;

3 durées, une par propriété

transition-timing-function

La propriété transition-timing-function permet de spécifier la forme de la transition. L'ordre des formes compte et correspond à celui des autres propriétés. transition-duration : linear, ease-in, ease-in-out; 3 formes, une par propriété.

transition-timing-function : linear, ease-in, ease-in-out;

3 formes, une par propriété

linear: la transition suit une courbe linéaire, à la moitié de la transition la valeur de la propriété sera à la moitié
ease-in: la transition commence doucement et s'accélère petit à petit
ease-out: la transition commence rapidement et ralentit petit à petit
ease-in-out: la transition commence et se termine en douceur.

transition-delay

La propriété transition-delay permet de spécifier un délai avant le déclenchement de la transition. L'ordre des délais compte et correspond à celui des autres propriétés.

transition-delay : 0s, 1s, 1ms;

3 délais, un par propriété

Regroupement des propriétés

On privilégiera la propriété regroupée pour éviter de multiplier inutilement les lignes de code

On peut regrouper les propriétés de la façon suivante: chaque propriété est détaillée et elles sont séparées par des virgules.

transition: background 1s linear 0s, width 0.5s ease-in 1s, color 300 ms ease-in-out 1ms;

On peut aussi utiliser all si les paramètres sont les mêmes pour toutes les propriétés: on vise toutes les propriétés susceptibles de subir des transitions.

all
la durée
la forme
le délai

transition:all 0.5s ease-in-out 0.3s;

Démo
<STYLE>
body	{
	background:black;
}
#navi	{
	margin:25px;
}
#navi li{
	display:inline;
	
}
#navi li a{
	padding: 5px 15px;
	font-weight:bold;
	color:rgba(255,255,255,0.5);
	border:solid 1px white;
	border-radius:1px;
	transition:all 0.5s ease-in-out 0.3s;
		}
#navi li a:hover{
	color:rgba(255,255,255,1);
	border-radius:8px;
	background:rgba(255,0,0,0.8);
	
	}
</STYLE>
</HEAD>
<BODY>
<nav>
	<ul id="navi">
		<li><a href="">Home</a></li>
		<li><a href="">Ma vie</a></li>
		<li><a href="">Mon boulot</a></li>
		<li><a href="">Mes vacances</a></li>
		<li><a href="">Mon chien</a></li>
	</ul>
</nav>
</BODY>

Les transitions