CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
[CSS]シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック
パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。 実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。 Zooming Background Images 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。 Fitbit このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。 実装には多くの方法があります このエフェクトを実現するには、多くの異なる方法があります。 一つの選択肢として、jQueryのプ
![[CSS]シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/ef43b70cc6a162f1c12009ce51de6ba83db49b86/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016081602.gif)
デザイナーなら誰もが知ってるグラフィックデザインの基本「スイススタイル」をCSSアニメーションで！ -Swiss in CSS | コリス
デモを見ているだけで、クリエイティブな刺激がもらえる！そんな「Swiss in CSS」を紹介します。 ↓はアニメーションgifですが、実際のページはCSSのアニメーションで動いています。 Swiss in CSS ※アニメーションgifは、Konstruktive Grafik Swiss in CSSはスイススタイルでデザインされたポスターをCSSアニメーションで再現されたもので、美しいタイポグラフィ、精密なグリッド、印象的なカラーなど、現代のWebデザインの参考になると思います。 キャプチャ画像は静止画ですが、リンク先でそのアニメーションをお楽しみください。 ※全部アニメーションgifにしたら重すぎたので、やめました。
[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー
画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。
![[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー](https://cdn-ak-scissors.b.st-hatena.com/image/square/97e241cb850cccb7e305aced9830b1ed4c5cf3e3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015081001.png)
ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．円形 ２．タブ ３．ナビゲーション ４．アコーディオン ウィンドウ ５．モーダルウィンドウ ６．フローティングウィンドウ ７．Dialog(ダイアログ) ８．フォーム＋バリデーション ボタン ９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
Web制作者がチェックしておきたい、CSSのライブラリのまとめ
CSSがこんなに進化してるとは！18才の少年がつくった3Dアニメーションのライブラリがすごすぎる -voxel.css
CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事