[CSS]横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader
.flip-preloader { width: 300px; height: 60px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); perspective: 300px; perspective-origin: 50% 50%; } .flip-preloader.example-1 { top: 25%; height: 100px; width: 400px; } .flip-preloader div { position: absolute; width: 20%; height: 100%; background-color: red; left: 0%; box-sizing: border-box; transform-origin: 0% 5
![[CSS]横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b6fa800e15f872ac789f2e5bc1d97df8d9eeed1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017091301.png)
CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. キーフレーム 2. アニメーションのタイミング 3. アニメーションのディレイ 4. アニメーションの再生状態 5. アニメーションの反復回数 6. アニメーションの方向 7. アニメーションの塗りつぶしモード 8. 「will-change」機能 9. CSSの4つの重要な値 1
css-keyframer.js - CSS3のスタイル設定を使ったキーフレームアニメーション MOONGIFT
アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化（または移動）を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。 今回紹介するcss-keyframer.jsはそんなキーフレームアニメーションをCSSのように指定できるソフトウェアです。 css-keyframer.jsの使い方 デモです。JavaScriptの中にCSS風にアニメーションを指定しています。複数のエフェクトが指定できます。 実際のアニメーションです。形を変えつつ、回転しつつ、さらに色が変わります。 css-keyframer.jsではCSS3で指定できるスタイル設定を、時間を変化させながら適用できます。例えば四角がいきなり角丸になるのではなく、徐々に変化していくことでユーザの目を引く
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
