タグ CSS3アニメーション
人気順 5 users 10 users 50 users 500 users 1000 users[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス
2019/01/28
149 users
コリス
class
stylesheet
スクリプト
Libs
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque... 続きを読む
ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス - WPJ
2017/03/07
131 users
アニメーション
issue reproduced
WPJ
すっかり普及したCSS3アニメーション。ハイパフォーマンスなアニメーションを実現する、ちょっとした書き方のポイントとは？ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス 2017/03/07 Jose Rosario Articles in this issue reproduced from SitePoint Copyright © 2017, All rig... 続きを読む
[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster | コリス
2016/01/15
162 users
スクリプト
軽量
5KB
コリス
タッチデバイス対応
レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量（5kb）のスクリプトを紹介します。 パタパタ、クルクル、ペラペラ、本当に気持ちよく動きます。 jQuery Flipster -GitHub jQuery Flipsterのデモ jQuery Flipsterの使い方 jQuery Flipsterのデモ 対応ブラ... 続きを読む
商用利用無料！Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ | コリス
2015/10/22
324 users
コリス
Bootstrap
スクロールエフェクト
縦長ページ
最近のWebページで人気のある縦長ページ、CSS3アニメーション、スクロールエフェクト、大きい写真画像を使った背景、カードコンポーネントなど、UIデザインのトレンドを取り入れたBootstrapのテーマを紹介します。 B...記事の続きを読む 続きを読む
css3アニメーションのレパートリーがきっと増える！動きの参考になる21サイト | 株式会社WEB企画スタッフブログ
2015/03/06
157 users
レパートリー
プロパティ
近頃
アニメーション
普及
css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 ですが裏を返してみると、css3に対応しているブラウザは年々増えてきていますので、今後ますます実装するサイトが増えていくのではない... 続きを読む
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ | コリス
2015/02/06
439 users
コリス
スクリプト
進化
スタイルシート
まとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは... 続きを読む
商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ | コリス
2014/11/05
576 users
コリス
Bootstrap
スクロールエフェクト
商用
ベース
Webデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。 Bootstrapは先週3.3.0がリリースされ、...記事の続きを読む 続きを読む
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2014/08/06
196 users
Webクリエイターボックス
背景
Themify
一色
順番
フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサ... 続きを読む
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス
2014/07/02
124 users
コリス
ビューポート
jQuery
class
スクリプト
ページがロードされた時、ビューポートに要素が表示された時に、指定した要素をさまざまなCSS3アニメーションで表示するjQueryのプラグインを紹介します。 外部ファイルをセットして、あとは要素にclassを加えるだけの簡単実装です！ CSS3 Animate It CSS3 Animate It -GitHub CSS3 Animate Itのデモ CSS3 Animate Itの使い方 CSS3... 続きを読む
CSS3アニメーションをブラウザ上で簡単に作成・編集できる『bounce.js』 | 100SHIKI
2014/06/10
103 users
100SHIKI
プリセット
アニメーション
縮小
モーション
ちとマニアックだが、メモ的にご紹介。 Bounce.jsは、CSS3アニメーションをブラウザ上で簡単に設定できるツールだ。 回転、移動、拡大・縮小など、細かい設定をしていくこともできれば、プリセットのモーションをいじることもできる。 実行結果は常に画面上に表示されているので確認も簡単だ。 また作ったアニメーションはその場でCSSに書き出すこともできる。覚えておくと便利そうですな。 bounce.j... 続きを読む
[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS | コリス
2014/05/12
121 users
jQuery
コリス
ヘッダ
トリガー
スクロール
スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS AniJS -GitHub AniJSのデモ AniJSの使... 続きを読む
[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic | コリス
2014/04/09
140 users
コリス
Magic
class
CSS
エフェクト
要素をアニメーションでスライドさせたり、ペラッとめくったり、ワイプさせたり、回転させたり、フェードさせたり、ぶるぶる震えさせたり、さまざまなエフェクトをclassを与えるだけで適用するスタイルシートを紹介します。 この宇宙っぽい絵面がワクワク感を高めますねｗ Magic CSS3 animations Magic -GitHub Magicのデモ Magicの使い方 Magicのデモ Magic ... 続きを読む
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation | コリス
2014/03/03
119 users
コリス
jQuery
ポパー
Animation
class
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ ... 続きを読む
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css | コリス
2014/01/06
318 users
コリス
Sass
ホバーエフェクト
Step
class
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル ... 続きを読む
デザインの勉強にもなる、CSSで実装するパンくずのまとめ | コリス
2013/10/27
486 users
コリス
NAV
CSS
パンくず
アイコン
角丸や三角形、アイコンなどを添えたり、CSS3アニメーションを加えたりなど、CSSで実装するパンくずを紹介します。 機能的にはもちろんシンプルなテキストベースのものと同じですが、サイトのUIにあったデザインのパンくずも素敵ですよね。 Breadcrumb Tiny CSS3 Round Breadcrumb Flat CSS3 Breadcrumb Pure CSS3 Breadcrumb Nav... 続きを読む
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet | コリス
2013/07/10
303 users
Cheat Sheet
class
トリガー
スクロール
名称
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーシ... 続きを読む
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ - W3Q - Web制作者のお悩み解決サイト
2013/07/08
134 users
CSS
アニメーション
プレフィックス
W3Q
WEB制作者
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを... 続きを読む
脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）：CSS3アニメーションの基本 (1/3) - ＠IT
2013/07/04
177 users
クライアント
エンジニア
納品
立場
難しい要求
脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）：CSS3アニメーションの基本 (1/3) エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「... 続きを読む
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト | コリス
2013/06/19
227 users
コリス
アニメーショ
かわいいエフェクト
Firefox
デモ
CSS3アニメーションを使った、ちょっと素敵なかわいいホバーエフェクト12種類のデモを紹介します。 12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーショ... 続きを読む
トレンドを巧く取り入れてる、美しいクリーンなデザインのウェブサイトのまとめ | コリス
2013/06/17
115 users
コリス
WDF
パララックス
トレンド
ウェブサイト
最近のウェブデザインのトレンド、フラット、パララックス、ミニマル、大きい写真画像、CSS3アニメーションなどを巧く取り入れ、細部にまでこだわった美しいクリーンなデザインのウェブサイトをWDFから紹介します。 21 Beautiful Clean Website Designs 上記でたくさん紹介されている中から、いくつか刺さったものをピックアップしました。 Knock Knock Factory ... 続きを読む
CSS3アニメーションをらく～に実装！オンラインツール7選 | 株式会社LIG
2013/05/22
304 users
実装
株式会社LIG
こんにちは。デザイナーのハルエです。 最近の流行は「トシムリン」です。あぁ次こそ生で見たい・・ CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、「transition」でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・などな... 続きを読む
[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス
2013/04/10
112 users
img要素
デフォルト
共通
実装
HTML
画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切... 続きを読む
CSS3アニメーションで心地良いモーションを作る｜1 pixel｜サイバーエージェント公式クリエイターズブログ
2013/03/27
293 users
Pixel
サイバーエージェント公式クリエイターズブログ
はじめまして、 Ameba事業本部 teens事業部でフロントエンドディベロッパーをしている 2012年入社の山内と申します。 業務では、スマホ限定デコれるホムペ！Candyと新規アプリのHTML/CSSでの運用と開発を担当しています。ポヨン！プルン！という動き今回は下記のイメージのような2つの動きについて書いていきます。 1. ポヨンとオブジェクトが正面方向に拡大して縮小するまでの動き 2. プ... 続きを読む
2012年総まとめ：ウェブ制作に役立つエントリーBest 20 | コリス
2012/12/26
158 users
コリス
jQuery
レスポンシブ
エントリーBest
去年
2012年、当サイトでブックマークが多かったエントリーBest 20の紹介です。 今年はレスポンシブ、CSS3アニメーション、洗練されたデザインのUIが目立ったように思います。 3つともスマフォ絡みですね。 逆に、HTML5、jQueryは去年ほどではない気がしました、特にjQueryは来年のjQuery2に期待ですかね。 コリス 当サイトの購読は、RSS Feedをご利用すると便利です。 コリス... 続きを読む
[JS]jQueryのプラグイン100選 -2012年総集編 | コリス
2012/12/16
707 users
jQuery
コリス
レスポンシブ
スライダー
ナビゲーション
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関... 続きを読む