タグ CSS3アニメーション
人気順 10 users 50 users 100 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... 続きを読む
第17回 立体的なナビゲーションバーのアニメーション：CSS3アニメーションでつくるインターフェイス表現｜gihyo.jp … 技術評論社
2017/01/24
10 users
ナビゲーションバー
マウスポインタ
アニメーション
コード
今回のお題は， ボタンが立体的に並んだナビゲーションバーだ （ サンプル1 ）。マウスポインタを重ねると， ボタンが飛び出す。 「 Navigation Bar by Jan Kaděra 」 のデザインとアニメーションをもとに， わかりやすく組み立て直した。3次元の動きで， ボタンの数も多い。少しやっかいそうに感じたかもしれない。ところが， 思いのほかコードはたやすい。 平面的なナビゲーションバ... 続きを読む
[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]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション | コリス
2014/02/26
64 users
コリス
Twitter
蝶番
ホバーエフェクト
Webkit系
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 実際の動作は、下記デモページでお楽しみください。 Chrome, SafariのWebkit系がよいです。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awe... 続きを読む
[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]癒されたい人へ！窓越しの雨粒がどんどん増えていくスタイルシート -CSS Raindrops | コリス
2013/11/28
68 users
コリス
窓越し
キャプチャ
CSS
静止画
以前、JavaScriptで雨を再現した癒やし系スクリプトを紹介しましたが、今日紹介するのはスクリプト無し、CSS3アニメーションで実装する窓越しに楽しむ雨粒を紹介します。 キャプチャは静止画ですが、CSS3アニメーションで雨粒がどんどん増えていきます。 続きを読む
デザインの勉強にもなる、CSSで実装するパンくずのまとめ | コリス
2013/10/27
486 users
コリス
NAV
CSS
パンくず
アイコン
角丸や三角形、アイコンなどを添えたり、CSS3アニメーションを加えたりなど、CSSで実装するパンくずを紹介します。 機能的にはもちろんシンプルなテキストベースのものと同じですが、サイトのUIにあったデザインのパンくずも素敵ですよね。 Breadcrumb Tiny CSS3 Round Breadcrumb Flat CSS3 Breadcrumb Pure CSS3 Breadcrumb Nav... 続きを読む
CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」:phpspot開発日誌
2013/10/11
37 users
エブ
エフェクト
phpspot開発日誌
一見
価値
CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 2013年10月11日- jQuery Custombox :: dixso.net CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 モーダルダイアログ自体のデザインは至って普通なんですが、出てくる際のエフェクトが豊富で一見の価値ありです エフ... 続きを読む
レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」:phpspot開発日誌
2013/07/24
37 users
ギャラリー
オシャレ
phpspot開発日誌
レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 2013年07月24日- S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」。 次のようなオシャレなギャラリー... 続きを読む
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アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「... 続きを読む
[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ | コリス
2013/06/26
93 users
コリス
モーダルウインドウ
エフェ
CSS
アニメーション
トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。 NIFTY MODAL WINDOW EFFECTS デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。 デモページ デモは、全部で19種類のエフェ... 続きを読む
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト | コリス
2013/06/19
227 users
コリス
アニメーショ
かわいいエフェクト
Firefox
デモ
CSS3アニメーションを使った、ちょっと素敵なかわいいホバーエフェクト12種類のデモを紹介します。 12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーショ... 続きを読む