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

2013/08/5

ここまで出来る！覚えとくと便利な「プログラム」サンプルまとめ

食材を扱っているお客さんから、「ECサイト」を作ってくれと頼まれたので作成しました（事情により、CMSは使えず）。さらにメンテンスが楽になるように更新やSEOを自動化しました。

2014/09/1

Web制作で使えた！jQueryプラグインまとめ＋起業しました

報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブ

2016/10/3

聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能

効率よくレイアウトを作成できるように、あまり聞き慣れないけど、今後増えていくであろうプロパティや単位、仕様策定中の新しいプロパティなどについて非常に参考になる記事をチョイス

2014/08/4

メモしておきたい！サイト制作時に知っておくと「意外」と役に立つこと

今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。 もくじ ドメイン