CSS3 Animation Effect 関数 要素 使い方・書き方 例 CSS3 サンプル
Animation Effect CSS プロパティとは
トピック：CSSアニメーションを使用すると、JavaScriptやFlashを使わなくても、ほとんどのHTML要素をアニメーション化する事ができる アニメーションは、モーションエフェクトを作成して外観を変更するプロセスですCSSは、さまざまなアニメーションエフェクトをサポートして、イベントモーションを変更する
プロパティ Bounce
| Animation Effect プロパティ 値 | Animation Effect アニメーションエフェクト メソッド 説明 |
|---|---|
Bounce 指定方法 CSS アニメーション サンプルBounce 例 プロパティ 書き方 コード | Bounceはバウンス（弾む・跳ねる） この アニメーション エフェクトは、エレメントを取得した後、「要素をバウンドするように表示」 変化させるために使用される |
Bounce In 指定方法 CSS アニメーション サンプルBounce In 例 プロパティ 書き方 コード | Bounce Inはバウンス（弾む・跳ねる） この アニメーション エフェクトは、エレメントを取得した後、「要素をバウンドしながら拡大縮小するように表示」し素早く要素を変更させるために使用される |
Bounce In Down 指定方法 CSS アニメーション サンプルBounce In Down 例 プロパティ 書き方 コード | Bounce In Downはこの アニメーション エフェクトは、エレメントを取得した後、画像などを「上から移動 スライド バウンドしながら表示」し素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce In Up 指定方法 CSS アニメーション サンプルBounce In Up 例 プロパティ 書き方 コード | Bounce In Upはこの アニメーション エフェクトは、エレメントを取得した後、画像などを「下から移動 バウンドしながらスライド 表示」し素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce In Left 指定方法 CSS アニメーション サンプルBounce In Left 例 プロパティ 書き方 コード | Bounce In Leftはこの アニメーション エフェクトは、エレメントを取得した後、画像などを「左から横移動 バウンドしながらスライド 表示」し素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce In Right 指定方法 CSS アニメーション サンプルBounce In Right 例 プロパティ 書き方 コード | Bounce In Right はこの アニメーション エフェクトは、エレメントを取得した後、画像などを「右から横移動 スライド バウンドしながら表示」し素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce Out 指定方法 CSS アニメーション サンプルBounce Out 例 プロパティ 書き方 コード | Bounce Outはバウンス（弾む・跳ねる） このアニメーション エフェクトは、エレメントを取得した後、「要素をバウンドしながら拡大縮小するようにフェードアウト 消える」素早く要素を変更させるために使用される |
Bounce Out Down 指定方法 CSS アニメーション サンプルBounce Out Down 例 プロパティ 書き方 コード | Bounce Out Downはバウンス（弾む・跳ねる） この アニメーション エフェクトは、エレメントを取得した後「要素をバウンドするように下に移動 フェードアウト 消える」素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce Out Up 指定方法 CSS アニメーション サンプルBounce Out Up 例 プロパティ 書き方 コード | Bounce Out Upはバウンス（弾む・跳ねる） この アニメーション エフェクトは、エレメントを取得した後「要素をバウンドするように上に移動 フェードアウト 消える」素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce Out Left 指定方法 CSS アニメーション サンプルBounce Out Left 例 プロパティ 書き方 コード | Bounce Out Leftはバウンス（弾む・跳ねる） この アニメーション エフェクトは、エレメントを取得した後「要素をバウンドするように左に移動 フェードアウト 消える」素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
Bounce Out Right 指定方法 CSS アニメーション サンプルBounce Out Right 例 プロパティ 書き方 コード | Bounce Out Right はバウンス（弾む・跳ねる） この アニメーション エフェクトは、エレメントを取得した後「要素をバウンドするように右に移動 フェードアウト 消える」素早く要素を変更、または離れたところから要素を移動や変化させるために使用される |
- このページでの Animate this element ボタンの「フェードアウト サンプル」は便宜上 数秒後に再表示しています。 実際のサンプルは 実例デモページで確認できます。
プロパティ Fade
| Property | Fade アニメーションエフェクト メソッド 説明 |
|---|---|
Fade In 指定方法 CSS アニメーション サンプルFade In 例 プロパティ 書き方 コード | Fade Inは画像・文字や要素などを徐々にふわっとフェードイン 表示
|
Fade In Down 指定方法 CSS アニメーション サンプルFade In Down 例 プロパティ 書き方 コード | Fade In Downは画像・文字や要素などを徐々にふわっと下に移動しながらフェードイン 表示する
|
Fade In Down Big 指定方法 CSS アニメーション サンプルFade In Down Big 例 プロパティ 書き方 コード | Fade In Down Bigは画像・文字や要素などを画面の外から徐々にふわっと下に移動しながらフェードイン 表示する
|
Fade In Left 指定方法 CSS アニメーション サンプルFade In Left 例 プロパティ 書き方 コード | Fade In Leftは画像・文字や要素などを徐々にふわっと左から右に移動しながらフェードイン 表示する
|
Fade In Left Big 指定方法 CSS アニメーション サンプルFade In Left Big 例 プロパティ 書き方 コード | Fade In Left Bigは画像・文字や要素などを画面の外から徐々にふわっと左から右に移動しながらフェードイン 表示する
|
Fade In Right 指定方法 CSS アニメーション サンプルFade In Right 例 プロパティ 書き方 コード | Fade In Rightは画像・文字や要素などを徐々にふわっと右から左に移動しながらフェードイン 表示する
|
Fade In Right Big 指定方法 CSS アニメーション サンプルFade In Right Big 例 プロパティ 書き方 コード | Fade In Right Bigは画像・文字や要素などを画面の外から徐々にふわっと右から左に移動しながらフェードイン 表示する
|
Fade in Up 指定方法 CSS アニメーション サンプルFade in Up 例 プロパティ 書き方 コード | Fade in Upは画像・文字や要素などを徐々にふわっと下から上に移動しながらフェードイン 表示する
|
Fade In Up Big 指定方法 CSS アニメーション サンプルFade In Up Big 例 プロパティ 書き方 コード | Fade In Up Bigは画像・文字や要素などを画面の外から徐々にふわっと下から上に移動しながらフェードイン 表示する
|
Fade Out 指定方法 CSS アニメーション サンプルFade Out 例 プロパティ 書き方 コード | Fade Outは画像・文字や要素などを徐々にふわっとフェードアウトする
|
Fade Out Down 指定方法 CSS アニメーション サンプルFade Out Down 例 プロパティ 書き方 コード | Fade Out Downは画像・文字や要素などを徐々にふわっと上から下移動しながらフェードアウトする
|
Fade Out Down Big 指定方法 CSS アニメーション サンプルFade Out Down Big 例 プロパティ 書き方 コード | Fade Out Down Bigは画像・文字や要素などを徐々に下移動しながら画面の外にフェードアウトする
|
Fade Out Left 指定方法 CSS アニメーション サンプルFade Out Left 例 プロパティ 書き方 コード | Fade Out Leftは画像・文字や要素などを徐々にふわっと左に移動しながらフェードアウトする
|
Fade Out Left Big 指定方法 CSS アニメーション サンプルFade Out Left Big 例 プロパティ 書き方 コード | Fade Out Left Bigは画像・文字や要素などを徐々に左移動しながら画面の外にフェードアウトする
|
Fade Out Right 指定方法 CSS アニメーション サンプルFade Out Right 例 プロパティ 書き方 コード | Fade Out Rightは画像・文字や要素などを徐々にふわっと右に移動しながらフェードアウトする
|
Fade Out Right Big 指定方法 CSS アニメーション サンプルFade Out Right Big 例 プロパティ 書き方 コード | Fade Out Right Bigは画像・文字や要素などを右側に移動しながら画面の外にフェードアウトする
|
Fade Out Up 指定方法 CSS アニメーション サンプルFade Out Up 例 プロパティ 書き方 コード | Fade Out Upは画像・文字や要素などを徐々にふわっと上側に移動しながらフェードアウトする
|
Fade Out UP Big 指定方法 CSS アニメーション サンプルFade Out UP Big 例 プロパティ 書き方 コード | Fade Out UP Bigは画像・文字や要素などを上に移動しながら画面の外にフェードアウトすることができる
|
- このページでの Animate this element ボタンのフェードアウトサンプルは便宜上 数秒後に再表示しています。 実際のサンプルは 実例デモページで確認できます。
プロパティ Flash: 点滅
| Property | Flash アニメーションエフェクト メソッド 説明 |
|---|---|
Flash 指定方法 CSS アニメーション サンプルFlash 例 プロパティ 書き方 コード | Flashは画像・文字や要素などをフラッシュ:点滅 表示させることができる
|
プロパティ Flip: 3D 回転
| Property | Flip アニメーションエフェクト メソッド 説明 |
|---|---|
Flip 指定方法 CSS アニメーション サンプルFlip 例 プロパティ 書き方 コード | Flipは画像・文字や要素などを3D回転させながら 表示することができる または素早い動きでひっくり返ることができる
|
Flip In X 指定方法 CSS アニメーション サンプルFlip In X 例 プロパティ 書き方 コード | Flip In Xは画像・文字や要素などを上下に3D回転させながら フェードイン 表示することができる または素早い動きでひっくり返ることができる
|
Flip In Y 指定方法 CSS アニメーション サンプルFlip In Y 例 プロパティ 書き方 コード | Flip In Yは画像・文字や要素などを左右に3D回転 移動させながら フェードイン 表示することができる または素早い動きでひっくり返ることができる
|
Flip Out X 指定方法 CSS アニメーション サンプルFlip Out X 例 プロパティ 書き方 コード | Flip Out Xは画像・文字や要素などを上下に3D回転 移動させながらフェードアウトすることができる
|
Flip Out Y 指定方法 CSS アニメーション サンプルFlip Out Y 例 プロパティ 書き方 コード | Flip Out Yは画像・文字や要素などを左右に3D回転 移動させながらフェードアウトすることができる
|
プロパティ Light Speed
| Property | Light Speed アニメーションエフェクト メソッド 説明 |
|---|---|
Light Speed In 指定方法 CSS アニメーション サンプルLight Speed In 例 プロパティ 書き方 コード | Light Speed Inは画像・文字や要素などを斜めに傾ける状態で移動させながら フェードイン スライド表示することができる
|
Light Speed Out 指定方法 CSS アニメーション サンプルLight Speed Out 例 プロパティ 書き方 コード | Light Speed Outは画像・文字や要素などを斜めに傾ける状態で移動させながらフェードアウトすることができる
|
プロパティ Roll: 2D 回転
| Property | Roll: 2D 回転 アニメーションエフェクト メソッド 説明 |
|---|---|
Roll In 指定方法 CSS アニメーション サンプルRoll In 例 プロパティ 書き方 コード | Roll Inは画像・文字や要素などを回転させながら フェードイン 表示することができる
|
Roll Out 指定方法 CSS アニメーション サンプルRoll Out 例 プロパティ 書き方 コード | Roll Outは画像・文字や要素などを回転させながら フェードアウトすることができる
|
Rotate In 指定方法 CSS アニメーション サンプルRotate In 例 プロパティ 書き方 コード | Rotate Inは画像・文字や要素などを要素内の中心で回転させながら フェードイン 表示することができる
|
Rotate In Down Left 指定方法 CSS アニメーション サンプルRotate In Down Left 例 プロパティ 書き方 コード | Rotate In Down Leftは画像・文字や要素などを左上から右下に回転させながら フェードイン 表示することができる
|
Rotate In Down Right 指定方法 CSS アニメーション サンプルRotate In Down Right 例 プロパティ 書き方 コード | Rotate In Down Rightは画像・文字や要素などを右上から左下に回転させながら フェードイン 表示することができる
|
Rotate In Up Left 指定方法 CSS アニメーション サンプルRotate In Up Left 例 プロパティ 書き方 コード | Rotate In Up Leftは画像・文字や要素などを右下から左上に回転させながら フェードイン 表示することができる
|
Rotate In Up Right 指定方法 CSS アニメーション サンプルRotate In Up Right 例 プロパティ 書き方 コード | Rotate In Up Rightは画像・文字や要素などを左下から右上に回転させながら フェードイン 表示することができる
|
Rotate Out 指定方法 CSS アニメーション サンプルRotate Out 例 プロパティ 書き方 コード | Rotate Outは画像・文字や要素などを要素内の中心で回転させながら フェードアウトすることができる
|
Rotate Out Down Left 指定方法 CSS アニメーション サンプルRotate Out Down Left 例 プロパティ 書き方 コード | Rotate Out Down Leftは画像・文字や要素などを右下に回転させながら フェードアウトすることができる
|
Rotate Out Down Right 指定方法 CSS アニメーション サンプルRotate Out Down Right 例 プロパティ 書き方 コード | Rotate Out Down Rightは画像・文字や要素などを左下に回転させながら フェードアウトすることができる
|
Rotate Out Up Left 指定方法 CSS アニメーション サンプルRotate Out Up Left 例 プロパティ 書き方 コード | Rotate Out Up Leftは画像・文字や要素などを左上に回転させながら フェードアウトすることができる
|
Rotate Out Up Right 指定方法 CSS アニメーション サンプルRotate Out Up Right 例 プロパティ 書き方 コード | Rotate Out Up Rightは画像・文字や要素などを右上に回転させながら フェードアウトすることができる
|
プロパティ Zoom
| Property | Zoom アニメーションエフェクト メソッド 説明 |
|---|---|
Zoom In 指定方法 CSS アニメーション サンプルZoom In 例 プロパティ 書き方 コード | Zoom Inは画像・文字や要素などが画面奥から 移動 ズームイン 表示することができる |
Zoom Out 指定方法 CSS アニメーション サンプルZoom Out 例 プロパティ 書き方 コード | Zoom Outは画像・文字や要素などが画面奥へ 移動 ズームアウトすることができる |
Zoom In Down 指定方法 CSS アニメーション サンプルZoom In Down 例 プロパティ 書き方 コード | Zoom In Downは画像・文字や要素などが画面 上奥から 移動してズームイン 表示することができる |
Zoom In Up 指定方法 CSS アニメーション サンプルZoom In Up 例 プロパティ 書き方 コード | Zoom In Upは画像・文字や要素などが画面 下奥から 移動してズームイン 表示することができる |
Zoom In Left 指定方法 CSS アニメーション サンプルZoom In Left 例 プロパティ 書き方 コード | Zoom In Leftは画像・文字や要素などが画面 左奥から 移動してズームイン 表示することができる |
Zoom In Right 指定方法 CSS アニメーション サンプルZoom In Right 例 プロパティ 書き方 コード | Zoom In Rightは画像・文字や要素などが画面 右奥から 移動してズームイン 表示することができる |
zoom Out Up 指定方法 CSS アニメーション サンプルzoom Out Up 例 プロパティ 書き方 コード | zoom Out Upは画像・文字や要素などが画面 上奥へ 移動しながらズームアウトすることができる |
Zoom Out Down 指定方法 CSS アニメーション サンプルZoom Out Down 例 プロパティ 書き方 コード | Zoom Out Downは画像・文字や要素などが画面 下奥へ 移動しながらズームアウトすることができる |
Zoom Out Left 指定方法 CSS アニメーション サンプルZoom Out Left 例 プロパティ 書き方 コード | Zoom Out Leftは画像・文字や要素などが画面 左奥へ 移動しながらズームアウトすることができる |
Zoom Out Right 指定方法 CSS アニメーション サンプルZoom Out Right 例 プロパティ 書き方 コード | Zoom Out Rightは画像・文字や要素などが画面 右奥へ 移動しながらズームアウトすることができる |
プロパティ Slide
| Property | Slide アニメーションエフェクト メソッド 説明 |
|---|---|
Slide In Up 指定方法 CSS アニメーション サンプルSlide In Up 例 プロパティ 書き方 コード | Slide In Upは画像・文字や要素などのが下から移動 スライド表示することができる |
Slide In Down 指定方法 CSS アニメーション サンプルSlide In Down 例 プロパティ 書き方 コード | Slide In Downは画像・文字や要素などのが上から移動 スライド表示することができる |
Slide In Left 指定方法 CSS アニメーション サンプルSlide In Left 例 プロパティ 書き方 コード | Slide In Leftは画像・文字や要素などのが左から移動 スライド表示することができる |
Slide In Right 指定方法 CSS アニメーション サンプルSlide In Right 例 プロパティ 書き方 コード | Slide In Rightは画像・文字や要素などのが右から移動 スライド表示することができる |
Slide Out Up 指定方法 CSS アニメーション サンプルSlide Out Up 例 プロパティ 書き方 コード | Slide Out Upは画像・文字や要素などのが上に移動 スライドして 非表示・消すことができる |
Slide Out Down 指定方法 CSS アニメーション サンプルSlide Out Down 例 プロパティ 書き方 コード | Slide Out Downは画像・文字や要素などのが下側に移動 スライドして 非表示・消すことができる |
Slide Out Left 指定方法 CSS アニメーション サンプルSlide Out Left 例 プロパティ 書き方 コード | Slide Out Leftは画像・文字や要素などのが左側に移動 スライドして 非表示・消すことができる |
Slide Out Right 指定方法 CSS アニメーション サンプルSlide Out Right 例 プロパティ 書き方 コード | Slide Out Rightは画像・文字や要素などのが右側に移動 スライドして 非表示・消すことができる |
- このページでの Animate this element ボタンの「フェードアウト サンプル」は便宜上 数秒後に再表示しています。 実際のサンプルは 実例デモページで確認できます。
プロパティ Other
| Property | Animation Effect 内容 説明 |
|---|---|
Hinge 指定方法 CSS アニメーション サンプルHinge 例 プロパティ 書き方 コード | Hingeは画像・文字や要素などの左上を支点に回転して落ちるように画面外に消えることができる
|
Pulse 指定方法 CSS アニメーション サンプルPulse 例 プロパティ 書き方 コード | Pulseは画像・文字や要素などを振動・短い脈拍（パルス）のしているように動かす表示をすることができる
|
Wobble 指定方法 CSS アニメーション サンプルWobble 例 プロパティ 書き方 コード | Wobbleは画像・文字や要素など振り子のように動かす表示ができる
|
Wiggle 指定方法 CSS アニメーション サンプルWiggle 例 プロパティ 書き方 コード | Wiggleは画像・文字や要素などの上下左右斜めに小さなの振動を与え、ぐらつき・よろめく、揺れるように表示することができる
|
Swing 指定方法 CSS アニメーション サンプルSwing 例 プロパティ 書き方 コード | Swingは画像・文字や要素などの要素内に吊り下げられた様な状態で左右上下揺れ動くように表示することができる
|
Tada 指定方法 CSS アニメーション サンプルTada 例 プロパティ 書き方 コード | Tadaは画像・文字や要素などの要素内で上下左右斜めに縮小拡大して動かし感動・興奮・強調・驚きなどの表現のような表示することができる
|
Rubber Band 指定方法 CSS アニメーション サンプルRubber Band 例 プロパティ 書き方 コード | Rubber Bandは画像・文字や要素などの要素内で上下左右にゴムのように伸び縮みして表示することができる
|
Jello 指定方法 CSS アニメーション サンプルJello 例 プロパティ 書き方 コード | Jelloは画像・文字や要素などの要素内で左右斜めにゴムのように伸び縮みして表示することができる
|
Shake 指定方法 CSS アニメーション サンプルShake 例 プロパティ 書き方 コード | Shakeは画像・文字や要素などの左右に小さなの振動を与え揺れる・震えているように表示することができる
|
Head Shake 指定方法 CSS アニメーション サンプルHead Shake 例 プロパティ 書き方 コード | Head Shakeは画像・文字や要素などの左右にShakeより小さなの振動を与え揺れる・震えているように表示することができる
|
