CSSのみで実現させる、すごいアニメーションやフレームワークまとめ

• 作成：2016/08/1
• Web制作

CSSのみでおしゃれなアニメーションを付与できるフレームワークやライブラリ。新しいものだけでなく、少し古いけど使えそうなものも掘り起こしてまとめました。

画像フィルター

画像にフィルターとブレンド効果をかけ、今時の見え方にします。CSS3のfilterとmix-blend-modeを使い、要素の見え方を変更します。デモページ内の画像をクリックすることでクラス名をコピーできます。

img {
  mix-blend-mode: darken;
}

CSS の mix-blend-mode プロパティは要素の内容物と、下にある要素の内容物や要素の背景色ををどのようにブレンドするかを示します。 mix-blend-mode - CSS | MDN

使用例

<div class="blend-blue">
  <img src="image.png"/>
  <span>lorem</span>
</div>

• [デモ] colofilter.css
• [Download] github

Instagram風の加工を施すならこちら。

使用例

<figure class="aden">
  <img src="../img.png">
</figure>

• [デモ] CSSgram
• [Download] github

Flexboxベース（タイルレイアウト・フルスクリーン・カードレイアウト）

カラム・タイルレイアウト・カードレイアウト・フルスクリーン・中央配置・ボタン・ローディングなど今風でオシャレなレイアウトが簡単に作れるFlexboxベースのレスポンシブ対応フレームワーク。

使用例

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

• [デモ] Bulma
• [Download] github

ツールチップ

HTML5で定義されたデータ属性*1を利用して、CSSのみで吹き出し型のツールチップを四方に出現させます。

*1 データ属性とはdata-で始まり値を設定できる属性で、JS/CSS/jQueryからでもアクセス可能な属性のこと。命名規則は半角英数字ハイフン・アンダースコア。小文字のアルファベットから指定します。参考：独自データ属性 - HTML5.JP

使用例

<span data-balloon="I'm a tooltip." data-balloon-pos="up">Blablabla</span>

• [デモ] Balloon.css
• [Download] github

タイムライン

今風のタイムラインをCSSのみで実現。レスポンシブ対応。

使用例（基本構造）

<div class="timeline gray-blue">
  <div class="timeline-block">
    <div class="timeline-icon"></div>
    <div class="timeline-content"> 
      <p> Any content </p>
      <div class="timeline-date">Yesterday</div>
    </div>
  </div>
</div>

• [デモ] Timelined
• [Download] github

サーチボックス

サーチ系アイコンをクリックするとサーチボックスを展開するトリッキーなエフェクト。シンプルながらも、少ないスペースで変化を楽しめるモーフィング。閉じる時のアニメーションもおさまりがよくて綺麗です。

使用例

<form class="inputbox">
  <input required="required"/>
  <button type="reset" class="del"></button>
</form>

• [デモ] [Download] codepen

ページ遷移

ページ遷移する際のエフェクトを追加できるアニメーションライブラリ。

使用例

<div class="animsition">
   <a href="./page1" class="animsition-link">animsition link 1</a>
   <a href="./page2" class="animsition-link">animsition link 2</a>
 </div>

• [デモ] Animsition
• [Download] github

グリッド

4キロバイトと軽量なレスポンシブ対応のグリッドシステムフレームワーク。

使用例

<div class="row">
  <div class="twelve columns">
  </div>
</div>

• [デモ] Pills
• [Download] github

ローディング

奥側に回転・滑らかに膨張・ウェーブ・薄っすら消えていく効果などを付与する、種類豊富なローディングエフェクト。デモ画面上部のSourceの箇所に記述例があります。

使用例

<div class="spinner"></div>

• [デモ] SpinKit
• [Download] github

チャート

棒グラフと散布図のみですが、CSSのみで実現可能な簡易グラフライブラリ。

使用例

<div class="column-chart">
    <ul class="plot-container">
        <li data-cp-size="99">99%</li>
        <li data-cp-size="50">50%</li>
        <li data-cp-size="30">30%</li>
...
        <li data-cp-size="90">90%</li>
    </ul>
</div>

• [デモ] cssplot
• [Download] github

クラスを使わないフレームワーク

htmlそのままでスタイル適用。クラスを使わないのですぐに適用可能な超軽量CSSフレームワーク。

使用例

<link rel="stylesheet" href="tacit.min.css"/>

• [デモ] tacit
• [Download] github

モバイルフレームワーク２種

モーダルウィンドウ・ドロワー・吹き出し・ページネーション・ゴーストボタンなど一式揃ったモバイルファーストで今時のフレームワーク。

使用例

<div class="o-grid__cell">
  <div class="o-grid-text">third</div>
</div>

• [デモ] BlazeCSS
• [Download] github

もうひとつ軽量なのでモバイルに取り入れやすそうなフレームワーク。

• [デモ] SkyBlue
• [Download] github

2015/06/22

gulpの使い方 Win/Mac対応

Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に

2018/10/15

今どきのプログラマー向け社内共有ツール

今使っているツール、今後使うであろうプログラマーやWeb制作向けの社内ツールをまとめました。 共同ノート、ブレスト マークダウンで共同編集・リアルタイムプレビューで

2016/11/21

モダンなフォームを作るために覚えておきたいCSSの擬似クラス

モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。 疑似クラスとは 疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセ

2014/04/7

知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ

あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業