CSSのskewを使って画像の一部をプルプルさせるアニメーション

skewはボックスの歪みを表現できるCSSプロパティですが、このskewうまく使うと画像の一部をプルプルさせるようなアニメーションができます。

今回はskewで画像の一部をプルプルさせるアニメーションを作ってみます。

 

画像を用意する

まずはプルプルさせたい画像を用意しましょう。クリームやプリンあたりが雰囲気出ますね。

この画像ですが、プルプルさせるにはポイントがあります。

画像は3枚重ね、一番下にはオリジナル画像、2枚目にはプルプルさせたい部分だけを切り抜いた画像、一番上にはプルプルさせたい部分以外の画像の合計3枚の画像が必要です。

一番上の画像はマスクのような役割を果たし、2枚目の画像が動いても不自然にならないようにしてくれます。

また、プルプルさせると2枚目と3枚目の画像の隙間に不自然な隙間ができてしまうので、一番下にはオリジナル画像を用意して隙間ができないようにします。

 

skewについて

skewを使うとX軸(横)、Y軸(縦)の傾斜角度を指定することができます。

例えば、transform: skew(30deg, -40deg);と記述した場合、X軸方向に30度、Y軸方向に-40度傾くことになります。

 

プルプルさせる時には@keyframesと組み合わせてアニメーションのようにします。

 

コード

プルプルさせるコードは以下の通りです。

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);}
}

 

プルプルはアニメーションとskewで細かく指定していきます。

角度の指定によってはもっと大きくプルプルさせたりもで切るので、自分の好きな角度を見つけてくださいね。