Glisser dans la transition de gauche en CSS
La création de comportements pour les transitions et les animations était l’une des innovations de CSS3. Pendant des années, les développeurs frontaux ont demandé la possibilité de créer ces interactions en utilisant HTML et CSS au lieu de JavaScript ou Flash.
Lorsque l’état d’un élément change, comme survolé, focalisé sur, actif ou ciblé, vous pouvez utiliser des transitions CSS3 pour modifier son apparence et son comportement.
Les animations CSS3 vous permettent de modifier l’apparence et le comportement d’un élément dans de nombreuses images clés. Les transitions vous permettent de passer d’un état à un autre, tandis que les animations établissent de nombreux points de transition basés sur des images clés distinctes.
Nous examinerons les diapositives CSS à partir d’exemples de transition de gauche dans cet article.
Glisser dans la transition de gauche en CSS
Cet exemple utilise translateX et translateY pour déplacer l’élément du point A au point B. La fonction de traduction vous permet de déplacer l’élément sur le plan (axes x et y).
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Slide-in Transition</title>
</head>
<style>
.element {
width: 200px;
height: 200px;
background: blue;
animation: moveToRight 1s ease-in-out;
animation-delay: 10ms;
}
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
</style>
<body>
<div class="element"></div>
</body>
</html>