2019.04.03

CSSでアニメーションさせる話。

はじめに

はじめまして、ハッピーズ開発チームの清木です。

普段は、機能の開発や、既存コードのリファクタリングを行なっています。

 

最初の記事ということで、何を書けばいいか迷いました。

最近50秒ほどあるCSSのみで動きを作っているwebサイトを閲覧し感動したので、数回に分けてCSSアニメーションについて書くことにします。

 

CSSで要素をアニメーションさせる方法２つの方法

1. CSS Animation ( Keyframe Animation )
2. CSS Transition ( Transition)

まず最初に、CSSでアニメーションを行う場合には大きく分けて2つの方法があり、それぞれに向き不向きがあるため、目的に応じて使い分けていくべきかと思います。

 

CSS AnimationはCSS Transitionに比べ、詳細なタイミングの指定や複雑なアニメーションが利用できます。

複雑なアニメーションが利用できるということは、動きやタイミングを指定をするため記述量が増えます。

そのため、簡単なアニメーションの場合はCSS Transitionを利用するのが、良いと感じます。

 

僕はCSSでアニメーションが使用できることを最近知った為、何を基準に使い分けるべきかは、わからないですが、要素が大きく動く場合や、動き続ける場合にCSS　Animation ( Keyframe Animation )を使用していくのがいいのではないかと思います。

 

次回の僕の更新では、それぞれの記法の違いなどについて書いていきたいと思います。