FigmaやXDのオブジェクト名を「anim-****」と設定することでアニメーションさせることができます。
A
N
I
M
A
T
I
O
N
使
用
で
き
る
ア
ニ
メ
ー
シ
ョ
ン
A
N
I
M
A
T
I
O
N
使
用
で
き
る
ア
ニ
メ
ー
シ
ョ
ン
ス
ク
ロ
ー
ル
し
て
く
だ
さ
い
ス
ク
ロ
ー
ル
し
て
く
だ
さ
い
anim-fadeIn
anim-fadeInDown
anim-fadeInLeft
anim-fadeInRight
anim-fadeInUp
anim-fadeInTopLeft
anim-fadeInTopRight
anim-fadeInBottomLeft
anim-fadeInBottomRight
anim-bounceIn
anim-bounceInDown
anim-bounceInLeft
anim-bounceInRight
anim-bounceInUp
anim-zoomIn
anim-jackInTheBox
anim-blurIn
anim-wipeIn
※figmaでの制約は左・上
※影がある場合は影よりも大きい枠を用意
anim-wipeInRight
※anim-wipeInと同じ
anim-wipeInLeft
※figmaでの制約は右・上
※影がある場合は影よりも大きい枠を用意
anim-wipeInUp
※figmaでの制約は中央・下
※影がある場合は影よりも大きい枠を用意
anim-wipeInDown
※figmaでの制約は中央・上
※影がある場合は影よりも大きい枠を用意
anim-wipeInCenter
※figmaでの制約は中央・中央
※影がある場合は影よりも大きい枠を用意
a
n
i
m
-
t
e
x
t
E
n
t
e
r
L
e
f
t
a
n
i
m
-
t
e
x
t
E
n
t
e
r
R
i
g
h
t
a
n
i
m
-
t
e
x
t
E
n
t
e
r
U
p
a
n
i
m
-
t
e
x
t
E
n
t
e
r
D
o
w
n
a
n
i
m
-
t
e
x
t
E
n
t
e
r
J
a
c
k
anim-fadeInOrder
グループ名に付けることで、直下の要素がアニメーションします
anim-blurInOrder
グループ名に付けることで、直下の要素がアニメーションします
anim-jackInOrder
グループ名に付けることで、直下の要素がアニメーションします
他
に
も
A
n
i
m
a
t
e
.
c
s
s
で
定
義
さ
れ
て
い
る
ア
ニ
メ
ー
シ
ョ
ン
も
使
え
ま
す
ま
た
、
オ
リ
ジ
ナ
ル
ア
ニ
メ
ー
シ
ョ
ン
も
C
S
S
で
作
成
可
能
で
す
A
n
i
m
a
t
e
.
c
s
s
AnimaHTMLFixer
© LEANSYSTEM.
ホーム
対応アニメーション
埋め込み機能
お問い合わせ
pageTop
