SHIDEN DESIGN BLOG

thumnail_20170410

CSSのmotion-pathを使ったアニメーションの実装

SponsorLink

CSSのmotion-pathを使って、要素を好きな軌道に沿って動かす方法を紹介しようと思います。
いくつかのデモを用意していますが、Chromeでご覧ください。
 
 

motion-path

 
motion-pahtは要素を移動させる際の軌道を定義するプロパティーです。
ここではSVGのpathを使用した方法を紹介しようと思います。
 
動かしたい要素を用意します。

 
 
プロパティーの値にSVGのpathを指定して、動かしたい軌道を定義していきます。

 
 
一つ一つ入力してもいいですが、とても面倒なので、このようなパスをillustratorで作成しました。
image_20170410_01
 
 
これだけでは何も起こらないので@keyframesとmotion-offsetを使用してアニメーションさせていきます。

 

 
 

motion-offset

 
motion-offsetの値を変更することで、逆から動かすこともできます。

 

 
 

background-image

 
ただブロック要素を動かしているだけなので、当然background-imageを指定することもできます。

 

 
 

offset-rotation

 
background-imageを指定したデモを見ると、パスに沿って要素が傾いているのが解かるかと思います。
その傾きを制御するのがoffset-rotationです。
 
「auto」「reverse」と「deg」を使った数値で指定することができ、デフォルトは「auto」となっています。
 

 
 

offset-path

 
2016年10月以降motion-pathではなくoffset-pathが推奨されているようです。
とは言え、どちらも動作に違いはありませんし、ブラウザのサポート状況も同じです。
現時点では両方を使用したがいいみたいです。
 
 

最後に

 
使い方は様々でしょうがjsでtoggleClassするだけでも簡単に面白いことができるように思います。
可能性は無限大ってやつでしょうか。
これなんのセリフだっけ?
 

 
 

ブラウザサポート状況

 
PC
 

Google Chrome Internet Explorer Mozilla Firefox Apple Safari Opera
46 × × × 33

 
 
モバイル
 

Android Android Chrome Android Firefox iOS Safari Opera Mobile
56 57 × × 37

 
 

SponsorLink

Related Articles