【CSS】トランジション効果をさくっと作る


初めに

ありそうで、なかったので作ってみました。というメモ。

パワポの アニメーションにもある、アピール効果ですね。


デモ

右から出現する例

解説

クリッピング範囲を徐々に狭めることで、トランジションを設定しています。

応用例として、斜めや消えるパターンも可能です。

図形範囲が、ベースからはみ出ている場合は、 0%, 100%より外の範囲を指定してください。

insetの使い方がわかりにくくて苦労しました。outboxなどはない様です。もちろん、polygonによる指定も可能です。

clip-path - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

応用例

応用例:数十以上あるパワポの効果もこれでできるでしょう。複数の効果をいれたり、ステップに分けるともっと複雑な効果もできます。

 アニメ要素 マイクロソフトのアニメ効果名 効果内容 CSSの対応の仕方
クリッピング系 アピール 現れる このページのやり方
図形(サークル)
ランダムストライプ
スプリット
ストリップ
現れる clip-pathを使う。
ワイプ 消える
色系 デイゾルブイン
フェード?
ブリンク
色を目立たせたり、消したりする。 背景、枠線、文字色等を変更する
その場で薄くしたり消す場合、opacity や rbga()を使う。
回転系 ターン
スピナー
ピンウィール
シーソー
目立たせる。 2次元、3次元変換にrotateを使う
大きさ系 ズーム
ベーシックズーム
ストレッチ
目立たせる。 それぞのれ太さや大きさを指定する。
またはscaleで拡大・縮小する。
移動系 スライドイン
ピークイン
フロートイン
ライズアップ

ブーメラン
バウンド
カーブ
ドロップ
フリップ
フロート
変化や時間軸を表したり、消したりする。 土台である。canvasを position:relativeで囲み、left/topなどを使って場所を動かす。

外はover-flow:hidden;

ソース

ソースはこちら。 前半にCSSがあります。

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

30 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です