CSS の左からの遷移からスライドイン
Jay Singh
2023年2月20日
2022年5月23日
トランジションとアニメーションの動作を作成することは、CSS3 の革新の 1つでした。何年もの間、フロントエンド開発者は、JavaScript や Flash の代わりに HTML と CSS を使用してこれらのインタラクションを構築するオプションを要求してきました。
要素の状態が変化したとき（ホバー、フォーカス、アクティブ、ターゲットなど）、CSS3 トランジションを使用してその外観と動作を変更できます。
CSS3 アニメーションを使用すると、多数のキーフレームの要素の外観と動作を変更できます。トランジションを使用すると、ある状態から別の状態に移行できますが、アニメーションは、個別のキーフレームに基づいて多くのトランジションポイントを確立します。
この記事では、左側のトランジションの例から CSS スライドインを見ていきます。
CSS の左からの遷移からスライドイン
この例では、translateX と translateY を使用して要素を点 A から B に移動します。translate 関数を使用すると、要素を平面（x 軸と 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>
