ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webアプリケーションが多機能化するのに合わせてアニメーションは欠かせない要素になってきています。ユーザがボタンを押した時、エラーになった時などアニメーションによってユーザビリティが大幅に変わってきます。

そんなユーザ操作の結果などに使いたいCSSアニメーションライブラリがVivifyです。

Vivifyの使い方

Vivifyでは多くのアニメーションが用意されています。その一部を紹介します。

まずはボール。バウンドするアニメーションです。

拡大縮小を繰り返します。

点滅するアニメーション。

シェイク。押せない時などに良さそうです。

バウンドしながら出現します。

上下左右から出現します。表示が確定するまで解像度が悪いのが難点かも。

逆に上下左右に消えていくパターン。

フリップ。

回転しながら出現します。

跳ねるアニメーション。

一瞬下に下がって、一気に上に消えていくアニメーションです。

回転しながら落下。

その場で回転。

形を段階的に変えながら消えます。

Vivifyのアニメーションは上下左右用意されており、様々な場面で利用できるでしょう。すべてCSSだけで実装されているのでスムーズです。ユーザインタラクションを向上させるためにもぜひ使ってみてください。

VivifyはCSS製のオープンソース・ソフトウェア(M

)です。

Vivify - CSS Animation Library

Martz90/vivify: Vivify is free CSS animation library.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2