アニメーションは主に2つの方法で実装されます：
- CSS Transitions（トランジション）
- CSS Animations（アニメーション）
ここでは、それぞれの方法と、アニメーションを作成するための基本的な構文やプロパティについて説明します。
1. CSS Transitions（トランジション）
トランジションは、要素の状態が変化した際に、プロパティの変更にアニメーション効果を付け加えるものです。例えば、ホバー時に背景色が変わる際にアニメーションを加えることができます。
基本構文
.element {
transition: property duration timing-function delay;
}
-
property: アニメーションを適用するプロパティ（例：
background-color、transform）。 -
duration: アニメーションの実行時間（例：
2s）。 -
timing-function: アニメーションの進行速度（例：
ease、linear）。 -
delay: アニメーションの開始前に遅延する時間（例：
0.5s）。
例: 背景色のトランジション
.button {
background-color: #007bff;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
この例では、button要素がホバーされると背景色が滑らかに変化します。
例: 座標の変化
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s ease;
}
.box:hover {
transform: translateX(100px); /* 横に100px移動 */
}
この場合、boxがホバーされると、左から右にスムーズに移動します。
2. CSS Animations（アニメーション）
CSSアニメーションは、より複雑なアニメーション効果を実現するために使用します。@keyframesというルールを使ってアニメーションを定義し、そのアニメーションを要素に適用します。
基本構文
@keyframes animation-name {
0% { /* 開始時のスタイル */ }
100% { /* 終了時のスタイル */ }
}
.element {
animation: animation-name duration timing-function delay iteration-count direction;
}
-
animation-name: アニメーションの名前（
@keyframesで定義したもの）。 - duration: アニメーションの所要時間。
-
timing-function: アニメーションの進行方法（
ease、linear、ease-inなど）。 - delay: アニメーションの遅延時間。
-
iteration-count: アニメーションの繰り返し回数（
infiniteで無限回繰り返すことができます）。 -
direction: アニメーションの方向（
normal、reverseなど）。
例: アニメーションの基本
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.element {
animation: slideIn 2s ease-out;
}
このアニメーションは、elementが左から右にスライドインする動きをします。
例: 複数のステップを使ったアニメーション
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
.button {
animation: bounce 1s ease infinite;
}
このアニメーションは、button要素が上下にバウンドする動きをします。
3. アニメーションの細かい制御
CSSアニメーションでは、いくつかのオプションを使って、アニメーションの挙動をさらに細かく制御できます。
-
animation-iteration-count: アニメーションを繰り返す回数（
infiniteで無限ループ）。 -
animation-direction: アニメーションの進行方向。
normal（順方向）、reverse（逆方向）、alternate（順番に進み、逆方向に戻る）など。 -
animation-fill-mode: アニメーション終了後の状態を指定します。
forwards（終了時のスタイルを維持）、backwards（開始時のスタイルを保持）、both（両方保持）。
例: 無限ループのアニメーション
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 2s linear infinite;
}
spinnerは2秒ごとに回転し続けます。
例: アニメーションの一時停止と再開
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.element {
animation: fadeInOut 3s ease-in-out infinite;
}
この例では、elementがフェードインしてフェードアウトするアニメーションが繰り返されます。
4. 複数アニメーションを同時に使用
1つの要素に対して複数のアニメーションを同時に適用することもできます。
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.element {
animation: move 2s ease-in-out, fade 1s ease-in 0.5s forwards;
}
この場合、elementは横に移動しながら、同時にフェードインする効果を得ます。
5. アニメーションの実行タイミング
アニメーションのタイミング関数（timing-function）には、いくつかの選択肢があります。これにより、アニメーションの進行速度や動きを変更できます。
- linear: 一定速度でアニメーションが進行します。
- ease: 最初は遅く、途中で速く、終わりも遅くなる動き。
- ease-in: 最初が遅く、最後が速く進行します。
- ease-out: 最初は速く、最後が遅く進行します。
- ease-in-out: 最初と最後が遅く、途中が速く進行します。
例: ease-in-outでスムーズに動く
@keyframes expand {
0% {
width: 50px;
}
100% {
width: 200px;
}
}
.element {
animation: expand 2s ease-in-out;
}
このアニメーションは、elementが最初は遅く、最後は遅く、途中は速く拡大します。
まとめ
CSSアニメーションを使うことで、ページの要素に動きを加え、インタラクティブで視覚的に魅力的な効果を提供できます。@keyframesとanimationプロパティを使って、複雑なアニメーションを作成し、transitionで簡単な効果を加えることができます。アニメーションは、ウェブデザインやユーザーインターフェースの向上に大いに役立ちます。