UnsplashのJason Ortegoが撮影した写真

はじめに

アニメーション用のプロパティには

「transition」と「animation」の２つのプロパティがあります。

２つもあると、それぞれの特徴や使い分けに迷ってしまいます。

　

この記事では特徴と使い分けについてご説明します。

それぞれの特徴

transition：簡易にアニメーションをつけられる

animation：手間がかかる分、自由度が高い

使い分け

transitionより手間が掛かる分、自由度の高いのがanimationです。

ですので、基本的にはtransitionを使い、transitionで対応できないならanimationを検討したら良いです。

ということで、transitionを知れば使い分け方がわかります。

transitionの機能

transitionの機能を一言で言うと、変化をスムーズにする機能です。

　

「:hoverなどの疑似クラス」や「JavaScriptでクラスを付け替える」などでCSSを動的に変化させることができますが、

この変化をスムーズにさせる機能がtransitionです。

　

実際に動きを見た方がわかりやすいと思うので、以下に２つ例を挙げます。

以下の例は２つとも、「左：transitionなし」、「右：transitionあり」としています。

■背景色を白⇒赤

■右に30px移動

この例を見てわかるように、transitionをつけると変化がスムーズになります。

始めと終わりの状態はtransitionが有っても無くても変わりません。

あくまで、変化途中がスムーズになるだけです。

animationの機能

animationはtransitionの強化版のようなプロパティで、以下のようなことができます。

・アニメーションを指定回数のループ、無限ループさせる。

・変化の途中（0%⇒50%、50%⇒100%など）で、異なるアニメーションをつける。

　

animationプロパティを使うとこんな感じで自在なアニメーションをつけられます。

　

今回はtransitionとanimationのそれぞれの特徴と使い分けに関する記事なので、これで終わりです。