Google Earthの衛星画像と3D画像を使って空飛ぶ映像を自分で作れる「Google Earth Studio」が登場 - GIGAZINE

2018/12/10 25 users 軌跡 アニメーションムービー ツール 都市 GIGAZINE

Google Earthの衛星画像や3D画像を使い、ブラウザ上で自分が都市や自然の中を飛び回っているようなアニメーションムービーを作ることができる「Google Earth Studio」がリリースされました。実際に自分が飛んでいるかのような軌跡をキーフレームで指定して高度に編集できるという強力なツールとなっています。 Google Ea... 続きを読む

Googleが画像フォーマット「WebP」向けライブラリ「libwebp 1.0.0」をリリース | OSDN Magazine

2018/05/02 14 users libwebp ロスレス WebP 不可逆圧縮 リリース

Googleが4月2日、オープンな画像フォーマット「WebP」向けライブラリ「libwebp 1.0.0」をリリースした。WebPはファイル容量を小さくすることでWebを高速にするという目的で開発された画像圧縮技術。 WebPはWeb向けの画像フォーマットで、ロスレスおよび不可逆圧縮の両方に対応する。拡張子は「.webp」。不可逆圧縮では、VP8動画コーデックが動画のキーフレームを圧縮するのと同じ... 続きを読む

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のみでアニメーションが... 続きを読む

CSSキーフレームアニメーションを使ったバナーの作りかた | 56docブログ

2013/02/08 38 users バナー 作りかた 56docブログ CSS 主流

CSSキーフレームアニメーションを使ったバナーの作りかた 【Web技術】 wrote on 2013/02/08 http://blog.56doc.net/Entry/518/CSSキーフレームアニメーションを使ったバナーの作りかた 広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使って... 続きを読む

CSS3のみでクロスフェードするワイルドなスライドショー:phpspot開発日誌

2012/06/29 21 users phpspot開発日誌 スライドショー キャプション ソース

CSS3 Fade slider CSS3のみでクロスフェードするワイルドなスライドショー。 JSレスでキーフレームによって実装されています。ソースのダウンロードも可能。 キャプションもついていてそれも動いてくれます ワイルドだろう 関連エントリ CSS3でシャレオツなリストを作るチュートリアル jQueryとCSS3でダイナミックに動くコンテンツスライダー フルスクリーン背景がスライドショーにな... 続きを読む

これはちょっと使いたくなる、キーフレームを使った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... 続きを読む