モーフィングアニメって、映画などのCGでよく見る手法ですが、CSSでもsvgを使って再現する事が可能です。
HTML コンテンツへ SVG 効果を適用する
SVG効果というのを使うと色々なフィルター効果を演出でき、WEBページにおける表現を格段にましてくれます。
さらにそれを応用すると、水滴同士がくっつくようなアニメをブラウザレンダリングで表現する事が可能です。
単純にエレメントを結合する場合と比べて、色々な効果ができそうです。
サンプル
ソースコード
このSVG効果はJSを一切使わずに実行できるので、ネットワーク通信に置いて非常に帯域負荷の少ない方法です。
<DOCTYPE html>
<html>
<head>
<style>
.bound{
position:absolute;
top:100px;
background-color:black;
border-radius:50%;
width:100px;
height:100px;
animation: scaleCircle 3s ease-in-out infinite;
}
.bd-1{
left:100px;
}
.bd-2{
left:200px;
}
@keyframes scaleCircle{
0%{
transform: scale(1);
}
50%{
transform: scale(0.5 , 0.5);
}
100%{
transform: scale(1);
}
}
#preload{
filter:url(#water);
}
</style>
</head>
<body>
<h1>CSS - Bound</h1>
<div id="preload" class="loading-ani">
<div class="bound bd-1"></div>
<div class="bound bd-2"></div>
<svg style="position: absolute;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="water">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
</filter>
</defs>
</svg>
</div>
</body>
</html>
ちなみに、Codepenのリンクも載せておきます。
css-bond | Codepen
応用アイデア
ページローディングや、ホームページの効果的な演出などに使えますね。
実際にこの効果を見たのが、とあるWEBサイトの読み込み画面だったので、非常にアイデア次第で、視覚効果が得られるとてもいい機能であると理解できました。
自分用の効果ライブラリを作っておくと仕事で使う時に便利に使えますよね。
ちなみに、ブラウザの対応状況ですが、「98.12%」の網羅性との事です。
Inline SVG in HTML5
IEは・・・orz
