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/11/10

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集

2014/12/01：続編である「最近のサイトで使われていたCSS小技集」を書きました。 今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高く

2014/05/7

見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ

ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグ

2013/09/30

まず知っておきたい！初心者でも「アフィリエイト」で稼ぐまとめ２８

なぜあの人は残業しないのか、帰宅後なにをやっているのか。ブログを継続して書いている理由ってなんだろうか。アフィリエイト収益が本業の収入を超えだすと、生活に余裕が出て気持ちも楽に

2016/01/18

Web制作に必要な知識が一通り学べるベスト記事9選

年末にやるべきだったと思いつつも、今更ながらWeb制作前に知っておくと助かる記事を、コムテブログの中から厳選しました。結構自分でもよく見返す記事です。Web制作に必要な基本