基礎

モーション

要素の登場や退場、注目を引くためのアニメーションと、カーソルを重ねたときの反応や背景の装飾効果をまとめたもの。指定するだけで使えて、利用者が「画面の動きを減らす」設定にしているときは自動で止まります。

登場

33

fade-in

fade-in-up

fade-in-down

fade-in-left

fade-in-right

fade-in-up-big

fade-in-down-big

fade-in-left-big

fade-in-right-big

zoom-in

zoom-in-up

zoom-in-down

zoom-in-left

zoom-in-right

slide-in-up

slide-in-down

slide-in-left

slide-in-right

bounce-in

bounce-in-up

bounce-in-down

bounce-in-left

bounce-in-right

flip-in-x

flip-in-y

back-in-up

back-in-down

back-in-left

back-in-right

roll-in

light-speed-in-left

light-speed-in-right

jack-in-the-box

退場

33

fade-out

fade-out-up

fade-out-down

fade-out-left

fade-out-right

fade-out-up-big

fade-out-down-big

fade-out-left-big

fade-out-right-big

zoom-out

zoom-out-up

zoom-out-down

zoom-out-left

zoom-out-right

slide-out-up

slide-out-down

slide-out-left

slide-out-right

bounce-out

bounce-out-up

bounce-out-down

bounce-out-left

bounce-out-right

flip-out-x

flip-out-y

back-out-up

back-out-down

back-out-left

back-out-right

roll-out

light-speed-out-left

light-speed-out-right

hinge

注目

12

bounce

flash

pulse

rubber-band

shake-x

shake-y

head-shake

swing

tada

wobble

jello

heart-beat

文字の装飾

あア Aa 彩

gradient-text

あア Aa 彩

shine-text

あア Aa 彩

glitch

ホバー

lift

カーソルを重ねてみてください

grow

カーソルを重ねてみてください

glare

カーソルを重ねてみてください

常時

float

glow

shimmer

star-border

背景

aurora

gradient-bg