見出し画像

CSS Transitionの紹介

wharaguchi

こんにちは。

娘とポケモンスナップにハマっている原口です。

プレイする度に新しいポケモンに出会えるので、娘とワクワクしながらプレイしています👧🏻 📸 👨🏻

さて、前回の記事 では LP に CSS でアニメーションを付けてみたという話をしました。

そこで今回は、アニメーションを作る際に使用しているCSS transitionについて簡単なサンプルを交えて紹介したいと思います。

CSS transition って？🤔

MDN では CSS transition についてこのように説明されています。

CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。

なんだかわかりにくいですが、つまりCSSのプロパティの値が変化する時に、その要素に対してアニメーション効果を付けられるよ、ということです。

CSS transition 関連プロパティ

transition関連のプロパティを紹介します。

transition-duration

transition-durationでは、トランジションにかかる時間を指定できるプロパティです。
指定は秒数またはミリ秒数で指定できます。

transition-duration: 1s;
transition-duration: 1000ms;


transition-property

transition-propertyは、トラジッションを適用させるCSS プロパティを指定できるプロパティです。

サンプルを用意しました。

1と2のどちらもisActiveがtrueになった場合に、widthとopacityの値が変化するものになっています。

「スタート」ボタンをクリックすると、1は即座にopacityが0.2になり、1秒かけてwidthが200pxになります。一方、2はwidthが即座に200pxになり、1秒かけてopacityが0.2になります。

これは1ではwidthに対してトランジションの効果を適用させるようにし、2ではopacityに対してトランジションの効果を適用させるようにしているので、指定されたCSSプロパティ以外の値にはトランジション効果が適用されていないためです。

const Bar = styled.div`
 width: 10px;
 height: 25px;
 transition-duration: 1s;
 ${(props) =>
   props.isActive &&
   `
   width: 200px;
   opacity: .2;
 `}
`;
const Bar1 = styled(Bar)`
 transition-property: width; // widthに対してのみtransition-durationが適用されている
 background-color: red;
`;
const Bar2 = styled(Bar)`
 transition-property: opacity; // opacityに対してのみtransition-durationが適用されている
 background-color: blue;
`;


transition-delay

transition-delayは、CSSプロパティの値が変更されてからトランジションの効果が適用されるまでの待機時間を指定できるプロパティです。

サンプルを用意しました。

こちらもtransition-propertyのサンプルと同様、1と2のどちらもisActiveがtrueになった場合に、widthの値が変化するものになっています。

1はtransition-delayの指定をしてないものになり、2は0.5sを指定しているものになります。
1はtransition-delayの指定がされていないため、「スタート」ボタンを押したあと即座にトランジションによる変化が開始されるのに対し、2はtransition-delay: 0.5sを指定しているため、0.5秒後にトランジションによる変化が開始されています。


transition-timing-function

transition-timing-functionは、MDNではこのように説明されています。

CSS の transition-timing-function プロパティは、トランジション効果の作用を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。

ちょっとわかりにくいですが、簡単にいうと動き方を決められるプロパティといった感じです。

トランジションの開始から終了まで、一定で動かす、開始は早く動き出し終了にかけてゆっくりに動かす、逆に開始をゆっくりにして終了にかけて早くする、などを決めることができます。

サンプルです。

それぞれ様々な動きをしていますが、動き方が異なるだけで全て2秒かけてwidthの値を変化させています。

表現したい動きに合わせて使い分けることができます。

ちなみに5のstepは初めて知りました👀

また6のcubic-bezierは自力で作成するのは難しい（と思う）ので、このサイトのようなジェネレーターで作るのがおすすめです。



transition ショートハンド

これら 4 つのtransitionプロパティは指定を一括で指定することができます。

サンプルです。

https://codesandbox.io/s/blog-sample-transition-shorthand-p9ed1

const Bar = styled.div`
 width: 10px;
 height: 25px;
 ${(props) =>
   props.isActive &&
   `
   width: 200px;
 `}
`;
const Bar1 = styled(Bar)`
 background-color: red;
 transition-duration: 2s;
 transition-property: width;
 transition-delay: 0.5s;
 transition-timing-function: linear;
`;
const Bar2 = styled(Bar)`
 background-color: blue;
 transition: 2s width 0.5s linear; // 一括指定
`;
const Bar3 = styled(Bar)`
 background-color: blue;
 transition: 2s 0.5s width linear; // 一括指定
`;
const Bar4 = styled(Bar)`
 background-color: blue;
 transition: linear 2s 0.5s width; // 一括指定
`;

ショートハンドについては順番の決まりは特にないようですが、必ずtransition-durationはtransition-delayの前に書く必要がありそうです。

最後に

以上、4つのtransitionプロパティを使用して、サンプル（ハンバーガーメニュー）を作ってみました。

簡単なサンプルではありますが、transitionとCSSの組み合わせでこのような簡単なアニメーションを実装することができます。

おすすめスペースの紹介

最近家の内観を見る機会が多いため、内観が好みのスペースを集めてみました。

採用について

スペースマーケットでは一緒にサービスを成長させてくれる仲間を募集しております。

我こそは！という方はお話だけでも結構ですので、是非ご応募お待ちしています。


この記事が気に入ったらサポートをしてみませんか？