cssアニメーションを使いたいけれど、細かく調整したりする時間がない！という時ありますよね…。
そんな時は『Animista』を使って気軽にcssアニメーションを使ってみましょう！
Animista公式
早速使ってみよう
ページを開くと、上にアニメーションの大まかな分類があります。
| BASIC | 拡大縮小や回転系のアニメーション |
|---|---|
| ENTRANCES | 要素が表示されるときのアニメーション |
| EXITS | 要素が消えてしまうときのアニメーション |
| TEXT | テキストのアニメーション |
| ATTENTION | 要素が揺れたり、注目させるときのアニメーション |
| BACKGROUND | 背景のアニメーション |
アニメーションの種類を選択しましょう。とりあえず表示の時に要素が縮小→デフォルトの大きさになるアニメーションを選びます。
次にアニメーション表示の時の詳細な動きを選択します。中央から表示、上から表示…など様々な動きを用意してくれています。
今回は普通に中央から表示を選択しました。
あとはアニメーションの詳細を設定できます。黒いボックス以外にもテキストや画像でプレビューしたり、アニメーションのスピードなどを細かく調整できます。
調整が完了したら、コードを取得します。右側のボタンを押してください。
通常のcssとアニメーションのcssがあるので、コピーして該当箇所に張り付けてください。要素の装飾は自分で適宜行ってください。これで完成です！
DEMO
『Animista』を使えば、簡単にインパクトのあるcssアニメーションが実現できます。
ぜひ使ってみてください。
