トランジション・アニメーション
CSS
CSS transitions と @keyframes
トランジション
transition プロパティで状態変化をアニメーション
.button {
background: #10b981;
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/* transition: プロパティ 時間 イージング 遅延 */
transition: background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
/* 全プロパティ（パフォーマンスに注意）*/
transition: all 0.3s ease;
/* 特定プロパティのみ（推奨）*/
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.button:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}イージング関数
/* キーワード */
transition-timing-function: ease; /* slow-fast-slow（デフォルト） */
transition-timing-function: ease-in; /* slow → fast */
transition-timing-function: ease-out; /* fast → slow */
transition-timing-function: ease-in-out; /* slow-fast-slow（対称） */
transition-timing-function: linear; /* 一定速度 */
transition-timing-function: step-start; /* ステップ（始点） */
transition-timing-function: steps(4); /* 4ステップ */
/* cubic-bezier カスタム曲線 */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
/* 参考サイト: easings.net / cubic-bezier.com */
/* バウンス風 */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
/* CSS @property でカスタム */@keyframes アニメーション
キーフレームで複雑なアニメーションを定義
/* キーフレームの定義 */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes spinner {
to { transform: rotate(360deg); }
}
/* 適用 */
.modal {
/* animation: 名前 時間 イージング 遅延 回数 方向 fill-mode play-state */
animation: slideIn 0.3s ease-out;
}
.loader {
animation: spinner 0.8s linear infinite;
}
.card:hover .icon {
animation: bounce 0.6s ease-in-out 2; /* 2回 */
}animation プロパティ詳細
.element {
animation-name: slideIn;
animation-duration: 0.4s;
animation-timing-function: ease-out;
animation-delay: 0.1s; /* 負の値で途中から開始 */
animation-iteration-count: infinite; /* または 数値 */
animation-direction: normal; /* reverse | alternate | alternate-reverse */
animation-fill-mode: forwards; /* none | backwards | both */
animation-play-state: running; /* paused で停止 */
/* 短縮形（複数アニメーション） */
animation:
slideIn 0.4s ease-out forwards,
fadeIn 0.6s ease-in-out forwards;
}
/* アニメーション制御（JavaScript） */
/* el.style.animationPlayState = 'paused'; */
/* el.addEventListener('animationend', handler); */transform
translate、rotate、scale、skew、perspective
.element {
/* 2D変換 */
transform: translateX(50px);
transform: translateY(-20%);
transform: translate(50px, -20px); /* X Y */
transform: rotate(45deg);
transform: rotate(-0.25turn);
transform: scale(1.2); /* 均等 */
transform: scale(2, 0.5); /* X Y */
transform: scaleX(1.5);
transform: skew(15deg, 5deg); /* X Y */
/* 複数変換（右から左の順で適用）*/
transform: translateY(-4px) scale(1.05) rotate(2deg);
/* 3D変換 */
transform: rotateY(180deg);
transform: perspective(500px) rotateY(30deg);
/* 変換の基点（デフォルト: center） */
transform-origin: top left;
transform-origin: 0% 100%;
/* GPU加速ヒント */
will-change: transform;
}アクセシビリティとモーション
prefers-reduced-motion でアニメーションを制御
/* モーション低減設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* または: モーションOKの時だけアニメーション定義 */
@media (prefers-reduced-motion: no-preference) {
.hero {
animation: fadeIn 0.6s ease-out;
}
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
}
}