仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

CSSアニメーション作成時におすすめのツール「CSS Animation Generator」

公開日:

CSS

CSSアニメーション作成時におすすめのツール「CSS Animation Generator」

 

最近cssでアニメーションを作成したのですが、思ったより色々な事ができて驚きました。
jsとcssを組み合わせることで様々な動きが再現でき、可能性を感じました。

 

今回は作成時にに非常に役に立ったツールがあるのでご紹介したいと思います。

 
 
 

CSS Animation Generator

 

ご紹介したいのはこの「CSS Animation Generator」というツールです。
web上でcssアニメーションの編集・プレビューができ、そのままコードとして吐き出すことができます。

 
 
 

使用方法

 

サイトリンク↓
https://coveloping.com/tools/css-animation-generator

※サイトに接続できないようです(2020年1月17日現在)。様子を見て記事を更新致します。

 
 

アクセスしたらまずは、「GO TO TOOL」を押して下さい。

 
 

この画面でプレビューできます。
設定できる内容は以下の通りです。

 

「Select Animation」
→ アニメーションの動きを指定できます。

 

「Function」
→ cssの「animation-timing-function」に当たる部分です。アニメーションの速度を指定できます。

 

「Duration (secs)」
→ cssの「animation-duration」に当たる部分です。アニメーションにかかる時間を指定できます。

 

「Infinite」
→ 一回のみか、永遠に繰り返すかを指定できます。

 

いずれかの設定を変更すると右の赤い四角が動きます。

 
 

「</> Code」を押すと対応したコードが出てきます。
あとはそれをコピーして使うだけです。

 
 
 

まとめ

 

web上でプレビューできますので、ローカルでいちいちコードを書き換えて確認する必要がありません。かなりの時間短縮になるのではないでしょうか。

 

また、CSSアニメーションにあまり触れたことがない人は、まずはこのサイトでコードを吐き出して確認することで、良い勉強になると思います。

 

最近はどこのwebサイトを見ても、アニメーションが入っているところが多いです。これからもアニメーションの需要は高まっていくと思います。
これを機に是非CSSアニメーションの練習をしてみてください!

ブログ作成者10
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00