アニメーションは、CSSの方がスピードも速くていいのですが、面倒なのがCSSの指定方法です。
そんな場合に簡単に、CSSアニメーションを作れるのが、「WAIT! Animate」です。
作例では、待機時間と14種類の動きを指定でき、その場でプレビューできます。
コピペできるので、ペーストするだけで動く簡単さです。
カスタムでは、アニメーションの時間や角度など細かく指定できます。
アイコンは、Webフォントを使うと簡単に動きます。
待機時間が指定できるので、ちょっとしたアクセントに便利ですね!
執筆者:KIYOTA
関連記事
-
-
これは便利!ソースとプレビューが見られる「Bootstrap 4 Cheat Sheet」
SPONSORED LINK Bootstrap 4 Cheat Sheet レスポンシブや効率的にコーディングする場合に便利なBootstrapのチートシートです。 ソースコードとプレビューがでるの …
-
-
PDFなど、CSSのみで拡張子によって自動でアイコンを表示する
SPONSORED LINK WordやExcelなどをサイトにアップして、アイコンをつけることは多いと思います。 <a href=”word.pdf” class=&# …
-
-
SPONSORED LINK 最近は、SASSを使えば、フォントサイズをpxからem/%に変換するのは簡単です。 しかし、以前作ったサイトを更新する際に、フォントサイズの一覧がない場合は、pxからem …
-
-
CSSのflexプロパティで右寄せ、左寄せ、中央寄せにする方法
SPONSORED LINK CSSのflexプロパティを使うと、均等配置や順番の指定などができ便利ですが、 floatのように、右寄せ、左寄せにしたい場合もあります。
-
-
アイデアのヒントになる。Swiss Styleを動かしているアニメーション。
SPONSORED LINK Swiss in CSS: animating the International Typographic Styleで、Swiss Styleを動かしているアニメーショ …
- PREV
- いやされるかわいさの「Simple animating emotions.」
- NEXT
- 量が質を生む