2022/2/10 (更新日:2022/2/10)

Transitionを使うとcssのみでアニメーションを手軽に作れます。便利で頻繁に使えるので解説していきます。

Program

by OpenClipart-Vectord pixabay

ボタンなどでtransitionを使ってcssでアニメーションする方法を知っていますか？

サイトでは必ずつかう機会があるcssのコーディングです。

アニメーションは初心者の方や忘れてしまった方にtransitionの使い方を解説します。

コーディング例も見れますのですぐに活用してください。

解説内容

Transitionを使うとcssのみでアニメーションを手軽に作れます。
Transitionプロパティの詳細内容
Transitionプロパティを使ったコーディング

最後まで読んでくださいね。

３分だけお付き合いください。

１．Transitionを使うとcssのみでアニメーションを手軽に作れます。

:hover や :active などのトリガをキッカケに、要素の変化をアニメーションするプロパティです。

　:hoverは、カーソルがターゲット上にある時の変化
　:activeは、ターゲットをクリックした時の変化

transitionは簡単なアニメーションで、初期状態から最終状態までを連続して変化するように指定できるだけです。

初期状態から最終状態の中間の状態は指定できません。

＊複雑な変化をするアニメーションについては、こちらを参照ください。

1-1. 記述代表例

ボタンをホバーしたときに文字色・背景色が３秒で変わるアニメーション

See the Pen transition-base by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊画面上部の[HTML][CSS][Result]をクリックすると、プログラミングコードおよび結果が表示されます。

＊画面下部の [1×] [0.5×] [0.25×] を選択すると結果の表示倍率が変わります。

transitionの使い方のポイント

index.html

style.css

.button a{
color:black;
background-color:azure;
border:1px solid aqua;
transition:all 3s;
}
.button a:hover{
color:white;
background-color:blue;
border:1px solid darkblue;
}

index.html

<a> タグのボタン

style.css

hoverでスタイル変化
(1)color:文字色
　黒⇒白
(2)background-color:ボタンの背景色
　薄水色⇒濃い青
(3)border:ボタンの外枠線
　水色⇒濃い青

アニメーション
transition:hoverされた時、
　all:変化する全要素について
　3s:３秒かけて変化する

1-2. transitionの書き方

transitionは、アニメーションの内容を一括に指定する表記方法です。

(1)アニメーションの指定が単独の表記

「transition:」に続けてアニメーションに関するプロパティを決められた順番に指定します。

例：　transition:all 2s ease 3ms;

１番目：アニメーションを適用するプロパティ
２番目：アニメーションの時間
３番目：アニメーションの変化の形
４番目：アニメーションを始めるまでの時間　

指定しない場合は記入しなければ良いです。

(2)アニメーションの指定が複数の表記

「transition:」に続けて、コンマ「,」をつけて続けて指定します。

例：　transition:color 1s,background-color 2s;

詳細の内容については、次節で解説します。

２．Transitionプロパティの詳細内容

2-1. transition-property

アニメーションの変化を適用するCSSプロパティを指定します。

指定しないプロパティは初期値から最終値に不連続的に変化します。

指定する項目

　none：
どのプロパティもトランジションを行いません。

　all：
トランジションが可能なすべてのプロパティで、トランジションを行います。

　特定のプロパティ名：
値が変更されたとき、トランジションするプロパティ名です。
指定しないプロパティは、ステップ時に一瞬に値が変化します。
二つの状態変化を使い分けると自然なアニメーションが生まれます。

2-2. transition-duration

アニメーション始まり、変化が完了するまでの所要時間を指定します。

　秒数またはミリ秒数で指定（例） 2s or 200ms

2-3. transition-delay

アニメーションの変化が始まるまでの遅れ時間を指定します。

　秒数またはミリ秒数で指定： (例） 2s or 200ms

2-4. transition-timing-function

アニメーションが変化する時の中間状態の変化の度合いを指定します。

主な関数

　ease：
トランジションの半ばまで変化量が増加し、最後にはまた遅くなります。

　linear：
トランジションは均等の速度になります。

　ease-in：
最初は遅く、トランジションの速度は完了まで増加し続けます。

　ease-out：
最初は速く始まり、トランジション速度を次第に遅くしていきます。

　ease-in-out：
最初はゆっくり開始し、トランジションを速度を上げた後、再び速度を遅くします。

＊transitionプロパティの詳細は、こちらを参照ください。

３．Transitionプロパティを使ったコーディング

See the Pen Untitled by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊ソースコードは、左上の[HTML][CSS]をクリックして参照してください。

立体的なボタンをクリックした時を例にします。

クリックしたときにボタンの影が徐々に変化すると違和感がある。

このような場合には、transitionから外す必要があります。

この例では、.colorとbackground-colorのみtransitionの指定をしています。

index.html

<div class=”button”>
<a href=”#”>立体的なボタン</a>
</div>

style.css

.button a{
color:white;
background-color:gray;
transition: background-color 0.3s,color 0.3s;
box-shadow:0px 5px black;
border:1px solid gray;
}
.button a:hover{
color:black;
background-color:ghostwhite;
}
.button a:active{
position:relative;
top:5px;
box-shadow:none;
}