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

2014/12/1

[続編] 効率的になった！最近のサイトで使われていたCSS小技集

前回（あのサイトでさりげなく使われていたCSS小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりとCSSのみ

2014/01/14

スピードアップした！フロントエンジニアがWeb制作のために知っておきたいことまとめ

以前までHTMLコーダーと呼ばれていたフロントエンドエンジニアは、表現の進歩やトレンドに伴って、ＣMSやAPIなどより高度な技術や知識を求められるようになりました。今回は今以上

2013/02/25

そうとう楽！WEB制作、ビジネスを助ける「テンプレート」まとめ

急に仕事をふられたけど いちから作っている時間はない だけど、素早く「それなり」に見せたい 見ているだけでデザインの参考になりそうなテンプレートや、無駄な作業

2013/07/29

フリーランスも社内も助かる！企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３

クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わな