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 :
- position: absolute; : On positionne le titre en absolut pour pouvoir gérer les positions.
- left: 0; : Je place le titre à 0 du bord gauche. Il faut préciser une valeur sinon l'animation ne fonctionnera. Vous devez toujours préciser une valeur de départ et une valeur d'arrivée pour vos animations CSS.
- transition: left 1s, transform 1s; : Animation CSS. J'anime en transition la propriété left et transform.
- white-space: nowrap; : Ca c'est la petite astuce qui va bien. Je veux que mon titre reste sur une ligne. Avec ce code je précise que les espaces sont insécables. Si vous omettez cette ligne, l'élément sera écrasé car il n'a pas de largeur définit.
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%);
}
- left: 100%; : Ici c'est enfantin. On définit la propriété left à 100%. Le bord gauche du titre est donc aligné sur le bord droit du parent... à l'extérieur du parent.
- transform: translateX(-100%); : Je déplace le titre avec une translation de -100%. Ici 100% est égale à la largeur de l'élément. translateX(-100%) signifie donc déplacer le titre de sa largeur vers la gauche. Le bord droit du titre est aligné avec le bord droit de son parent
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 :-)