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

2019年11月23日

テクノロジー プログラミング

趣味に「散歩」と書いてしまう人を見下しますが、自分も毎朝散歩をしている、ユゲタです。 loadingアニメーションも、数をこなしてきて、なんとなくこなれてきましたんですが、今回のflipアニメはロジックにまあまあ苦労してしまいました。 cubeを4つ使ってアニメーション設定をしているんですが、ポイントとしては、4つとも同じアニメ設定で成り立っているという点です。 それぞれを90度回転させてdurationで、再生時間をずらしているのですが、非常に面白い表現になっています。 flipアニメも、単純なrotateではなく、transform-3d機能を使っている点がミソですね。 transform-perspectiveで深度を指定するだけで、ポリゴンっぽい陰影がついて見た目がいい感じになります。 パッと見た感じloadingとして分かりづらい感じもするので、使用できる場所は限られるかもしれませんね。

Flip-Cube

<svg class="flip" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.flip g.flip{ transform-origin:32px 32px; transform : rotate(45deg) scale(0.65); } svg.flip g.flip > g{ -moz-transform-origin: 32px 32px; -ms-transform-origin: 32px 32px; -webkit-transform-origin: 32px 32px; transform-origin: 32px 32px; } svg.flip g.flip > g > rect{ transform-origin:32px 32px; fill:#00c6ff; animation: anim-flip 2.5s infinite linear both; } svg.flip .flip .flip-1{ transform:rotate(0deg); } svg.flip .flip .flip-2{ transform:rotate(90deg); } svg.flip .flip .flip-3{ transform:rotate(180deg); } svg.flip .flip .flip-4{ transform:rotate(270deg); } svg.flip .flip .flip-1 > rect{ fill:#00c6ff; } svg.flip .flip .flip-2 > rect{ animation-delay: 0.3s; fill:#00BCF0; } svg.flip .flip .flip-3 > rect{ animation-delay: 0.6s; fill:#00B8EB; } svg.flip .flip .flip-4 > rect{ animation-delay: 0.9s; fill:#00BCF0; } @keyframes anim-flip{ 0%, 10%{ transform : perspective(140px) rotateX(-180deg) scale(1.1); opacity : 0; } 25%, 75%{ transform : perspective(140px) rotateX(0deg) scale(1.1); opacity : 1; } 90%, 100%{ transform : perspective(140px) rotateY(180deg) scale(1.1); opacity : 0; } } </style> <g class="flip"> <g class="flip-1"><rect x="0" y="0" width="32" height="32"></rect></g> <g class="flip-2"><rect x="0" y="0" width="32" height="32"></rect></g> <g class="flip-3"><rect x="0" y="0" width="32" height="32"></rect></g> <g class="flip-4"><rect x="0" y="0" width="32" height="32"></rect></g> </g> </svg>

デモ

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

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。