cssのskewを使ってぷるぷるアニメーション

HTML・CSS

突然ですが、transformプロパティのskew使っていますか？
skewを使えばX軸、Y軸へのゆがみを表現できるのでちょっとした動きを作る際にとても便利です。

今回はそんなskewを使って、化粧品のクリームがぷるぷる揺れるデモを作っていきたいと思います！

完成デモを見る

素材を用意してHTMLに配置する

下記の写真を利用して、青色にしている真ん中のクリーム部分だけを動かしていきましょう。

用意した素材は、下記の3枚で、重なり合うようにHTMLに配置していきます。

）一番下にオリジナル写真。
）二番目に動かしたい箇所だけを切り抜いた「クリーム」画像。
）一番上にクリーム部分を切り抜いたマスク画像。

※二番目のクリーム画像を動かした際に、不自然な隙間ができてしまうことがあるので
念の為背景にオリジナル写真を配置しています。

skewについて

skewを使えばX・Y軸の傾斜角度をそれぞれ個別に指定することが可能です。
（ transform: skew(30deg,-40deg) と書けばX軸に30度、Y軸に-40度動きます）

これさえ理解できていれば、あとはkeyframesを使って細かく角度を指定すればOKです。

HTML


<div class="gel_bg">
   <img src="img/mask.png" class="mask" />
   <img src="img/gel.png" class="gel" />
</div>

CSS

.gel_bg {
   background: url(img/bg.png) no-repeat left top;
   width: 500px;
   height: 334px;
   position: absolute;
   overflow: hidden;
}

.mask {
   position: absolute;
   z-index: 2;
}

.gel {
   position: absolute;
   z-index: 1;
   animation: skew 2.3s linear infinite;
}

 /* skewの動きをここで設定 */
    @keyframes skew {
        0% {transform: skew(0deg, 0deg);}
        5% {transform: skew(5deg, 4.2deg);}
        10% {transform: skew(-4deg, -3deg);}
        15% {transform: skew(3deg, 2.2deg);}
        20% {transform: skew(-2deg, -1.5deg);}
        25% {transform: skew(0.9deg, 0.9deg);}
        30% {transform: skew(-0.6deg, -0.6deg);}
        35% {transform: skew(0.3deg, 0.3deg);}
        40% {transform: skew(-0.2deg, -0.2deg);}
        45% {transform: skew(0.1deg, 0.1deg);}  
        50% {transform: skew(0deg, 0deg);}
    }

完成デモを見る

　　　　
完成デモではX・Y軸の傾斜角度をそれぞれ指定して動かしていましたが、
もちろんX軸のみ、Y軸のみ動きを指定することも可能です。
それぞれの動きのサンプルもあげておきますので、是非参考にしてみてください！
　　

X軸、Y軸のみの動きサンプル