CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ | コリス

2017/04/11 132 users コリス ディレイ 反復 CSSアニメーション アニメーション

CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro... 続きを読む

CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート ｜ ライフハッカー［日本版］

2014/12/03 76 users アニメーション チートシート ライフハッカー HTML CSS

カメきち  - Webサービス,デザイン  12:00 PM CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート 「CSS3 ANIMATION CHEAT SHEET」ではHTMLの要素に滑らかなアニメーションをつけられるCSSが公開されています。CSS3からアニメーションやキーフレームを指定できるようになり、JavaScriptを使わなくてもCSSのみでアニメーションが... 続きを読む

これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス

2012/01/18 89 users コリス NAV Container ナビゲーション Opera

デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む

[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ | コリス

2011/09/19 81 users ローディング 意訳 ヘッダ コリス 透過PNG

キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。 下記は各ポイントの意訳です。 CSS3アニメーションとは アニメーションでドロップダウンするヘッダ 透過PNGを使ったカラーアニメーション 回転するローディングのアニメーション フォームのエラーをアニメーションで強調 フォームのエラーをアニメーションで強調:その2... 続きを読む

[CSS]さりげないアクセントとして面白い、キーフレームを使ったCSS3アニメーション | コリス

2011/08/26 72 users コリス absolute CSS deco position

キーフレームを使ったCSS3アニメーションのスタイルシートは、下記のようになります。 CSS 1枚目の葉っぱのスタイルシート。 ※ヘッダの葉っぱは同様に4枚の葉っぱをコントロールします。 .deco { position: absolute; } .leaf-1 { left: 670px; -webkit-animation: leaf1 2s ease infinite alternate 0... 続きを読む