SVG画像のバウンスのアニメーションの実装 - CSS
SVG画像のバウンスのアニメーションのコードを紹介します。
コード
以下のコードを記述します。
.bounce {
padding-top: 120px;
padding-left:64px;
width: 120px;
animation: bounce_frame 0.8s linear 0s infinite;
}
@keyframes bounce_frame {
0% {
transform: scale(1.0, 1.0) translate(0%, 0%) translateY(0px);
}
15% {
transform: scale(0.9, 0.9) translate(0%, 5%) translateY(0px);
}
30% {
transform: scale(1.3, 0.8) translate(0%, 10%) translateY(0px);
}
50% {
transform: scale(0.8, 1.3) translate(0%, -10%) translateY(-60px);
}
70% {
transform: scale(1.1, 0.9) translate(0%, 5%) translateY(0px);
}
100% {
transform: scale(1.0, 1.0) translate(0%, 0%) translateY(0px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="bounce01.css" />
</head>
<body>
<object class="bounce" type="image/svg+xml" data="img.svg"></object>
</body>
</html>
解説
SVG画像はobjectタグで表示します。詳しくは
こちらの記事を参照して下さい。
<object class="bounce" type="image/svg+xml" data="img.svg"></object>
補足
imgタグで以下のタグで記述した場合も同様の動作になります。
<img class="bounce" src="img.svg"/>
キーフレームの
scale translate 部分でバウンスのアニメーションを設定します。
丸い画像を変形により、つぶす効果のアニメーションを記述しています。座標が左上のため、単純につぶすと画像が上に移動しているように見えるため、
つぶれた際に、下に移動させることで重力の影響でつぶれているように見せるアニメーションになります。
transform: scale(1.0, 1.0) translate(0%, 0%)
translateY がジャンプにより上下に移動するアニメーションになります。
translateY(-60px)
表示結果
上記のページをWebブラウザで表示します。ページが表示されると、画像のアニメーションが開始します。
バウンスの効果がついたアニメーションが再生されます。
動画での表示結果です。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
