x-transitionを使う

基本的な使い方

アニメーションを付けたい要素に

x-transition

を付けるだけ。チョロいぞこれは。

オプションは

x-transition.delay.500ms

みたいにドットで繋ぐだけです。（後半でちょろっと解説しています。）

縮小・拡大＋透明度を上げながら文字が表示されています。

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

デフォルト動作の注意点
デフォルトの動作には「opacity（透明度）」と「scale（縮小・拡大）」の2つが含まれています。

「opacity」のみアニメーションを付けたいときは「x-transition.opacity」
「scale」のみアニメーションを付けたいときは「x-transition.scale」と設定すればOKです

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

表示速度を数値で設定することもできます。

// 0.5秒で表示したい場合
x-transition.opacity.duration.500ms

表示開始時のサイズを数値で設定することもできます。

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

top,right.buttom.leftで指定した方向から文字が出てきます。
②との微妙な違いを見比べてみてください。

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

それぞれのアニメーションに.delayを付ければアニメーションの動作開始を遅らせることができます。

x-transiton

x-transiton.opacity

x-transiton.scale

.origin.[方向]

origin.top.right みたいに複数組み合わせることも可能

.delay.[ミリ秒(ms)]

簡単すぎて申し訳なくなる。