【CSS】transitionとは？アニメーションさせる方法について解説します。animationとの違いは？

transitionとは？

transitionとは、「移行」、「移り変わり」という意味で、マウスをホバーした時やクリックした時に、プロパティが変化する時間や動きを指定することができます。

animationプロパティは、ページを開いた時や、再度読み込んだ時にアニメーションしますが、transitionは、マウスをホバーしたり、クリックしたりした時 に、スタートします。

transitionの設定

transitionのプロパティには以下があります。

プロパティ	説明
transition-property	transitionを適用するCSSのプロパティを指定します。
transition-duration	transitionの変化をする時間を設定します。
transition-timing-function	transitionの動きを設定します。
transition-delay	transitionの動きの開始時間を遅らせます。

例えば、、、赤い部分にマウスをのせてみてください。

一つ一つ書くこともできます。

CSS .box{
width: 100px;
height: 40px;
background: red;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: .5s;
}
.box:hover{
width: 100%;
height: 100px;
background: blue;
}

まとめて、一行で書くこともできます。

CSS .box{
transition: all 1s ease-in-out .5s;
}

transition-property

transition-property:all

allを指定すると、すべてのプロパティに適用されます。Box1は2秒かけて、幅、高さ、背景色が変わります。

CSS .box1{
width: 100px;
height: 40px;
background: red;
transition: all 2s;
}
.box1:hover{
width: 100%;
height: 100px;
background: blue;
}

transition-property:プロパティを指定

Box2はallではなく、widthだけ指定してみます。幅は2秒かけて変化しますが、高さと背景色は一瞬で変わります。

CSS .box2{
width: 100px;
height: 40px;
background: red;
transition: width 2s;
}
.box2:hover{
width: 100%;
height: 100px;
background: blue;
}

transition-duration

transition-durationでは、アニメーションする時間を設定することができます。Boxにマウスをホバーしてみてください。もしくは、タップしてください。

CSS .box3{
transition: 1s;
}
.box4{
transition: 2s;
}
.box5{
transition: 3s;
}
.box6{
transition: 4s;
}
.box7{
transition: 5s;
}

transition-timing-function

transition-timing-functionは、アニメーションの動きにアクセントを加えることができます。

以下は、すべて3秒かけてアニメーションしますが、それぞれ動きが異なります。Boxにマウスをホバーしてみてください。もしくは、タップしてください。

cubic-bezier(数値, 数値, 数値, 数値)については、また別のページで解説したいと思います。

CSS .box8{　
transition:3s ease;　
}　
.box9{　
transition:3s linear;　
}　
.box10{　
transition:3s ease-in;　
}　
.box11{　
transition:3s ease-out;　
}　
.box12{　
transition:3s ease-in-out;　
}

transition-delay

transition-delayは変化の開始時間を遅らせます。

以下は、設定は同じで、開始時間だけを1~5秒遅くしています。Boxをマウスでホバーしてみてください。もしくはタップしてください。

応用編

まとめ

transitionについて解説しました。複雑なアニメーションでなければ、animationより、transitionを使った方が簡単です。

widthやheight,translateを使って、アニメーションをいろいろ工夫してみましょう！

transition-property	変化させたいプロパティを指定	all or プロパティ
transition-duration	変化の所要時間を指定	数値+ｓ（秒）
transition-timing-function	ease	開始・終了付近の動きを滑らかに
	linear	一定の割合で直線的に
	ease-in	開始付近の動きを緩やかに
	ease-out	終了付近の動きを緩やかに
	ease-in-out	開始・終了付近の動きを緩やかに
animation-delay	開始時間を遅らせます	数値+ｓ（秒）