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

何でも制作できる！色々なサイトの「つくりかた」と知識まとめ

慣れていないジャンルのサイトを制作するときに素早く構築できるよう、コーポレート・ペライチ・通販・ポートフォリオ・サービス系ページなどジャンルごとに「つくりかた」や、簡単にシステ

2016/01/18

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

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

2014/06/9

Web制作者が捗る！知識が増える2014年トレンドまとめ

トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえ

2015/03/16

ここまで動かせる！楽しいcss アニメーションのサンプル集

小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニ