[SVG] loadingアニメーション #Flip-Cube

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

趣味に「散歩」と書いてしまう人を見下しますが、自分も毎朝散歩をしている下駄です。
 

loadingアニメーションも、数をこなしてきて、なんとなくこなれてきましたんですが、今回のflipアニメはロジックにまあまあ苦労してしまいました。
 

cubeを4つ使ってアニメーション設定をしているんですが、ポイントとしては、4つとも同じアニメ設定で成り立っているという点です。
 

それぞれを90度回転させてdurationで、再生時間をずらしているのですが、非常に面白い表現になっています。
 

flipアニメも、単純なrotateではなく、transform-3d機能を使っている点がミソですね。
 

transform-perspectiveで深度を指定するだけで、ポリゴンっぽい陰影がついて見た目がいい感じになります。
 

パッと見た感じloadingとして分かりづらい感じもするので、使用できる場所は限られるかもしれませんね。

Flip-Cube

 

See the Pen
svg-loading flip
by YugetaKoji (@geta1972)
on CodePen.


 

Leave a Reply

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