Image de l'article Déplacer un élément de gauche à droite (left to right) avec CSS animation

Déplacer un élément de gauche à droite (left to right) avec CSS animation

L'astuce CSS du jour est la suivante : Pouvoir animer un élément d'un bord à l'autre de son parent avec les animations CSS... sans connaître les dimensions de cet élément. Sinon ça serait trop facile !

Pour cette démo je vais utiliser le code HTML suivant :

<!DOCTYPE html>
<html lang="FR">
<head>
<title>Animation CSS : de gauche à droite</title>
<meta charset="utf-8" />
<style type="text/css">

</style>
</head>
<body>
<div id="bloc"><h1>Mon titre</h1></div>
</body>
</html>

Un simple bloc <div> dans lequel il y a un titre <h1> qui sera animé de gauche à droite au survol du bloc parent.

1) Positionner le bloc <div>

#bloc{
	height: 200px;
}

Pour la démo je ne fais rien sur cet élément. Il sera positionné en haut de la page sur toute la largeur. J'ai fixé la hauteur du bloc à 200 pixels parce que je vais animer le titre sur un survol (hover).

2) Positionner le titre <h1>

h1{
	position: absolute;
	left: 0;
	transition: left 1s, transform 1s;
	white-space: nowrap;
}

4 lignes de CSS seulement. Voici comment ça fonctionne :

Pour les navigateurs sous webkit n'oubliez de rajouter les préfix -webkit-.

	-webkit-transition: right 1s, -webkit-transform 1s;
	-webkit-transform: translateX(100%);

3) Animer le titre <h1> avec CSS


#bloc:hover h1{
	left: 100%;
	transform: translateX(-100%);
}

Et voilà ! C'est très simple de déplacer un élément avec les animations CSS.

L'astuce fonctionne pour des déplacements de droite à gauche, du haut vers le bas, du coin haut gauche vers le coin gauche droit, depuis les centres, etc. Il suffit de modifier les propriétés à animer (top, left, bottom, right) et d'adapter les translations (translateX, translateY).

Si vous avez des questions n'hésitez pas, les commentaires sont là pour ça :-)

 

Image Viewer