[PR]当サイトはアフィリエイト広告を利用しています。
はじめに
今回はSVGアニメーションの作品を掲載します。
和風の雲が夜空に流れるアニメーションです。
CodePenでのデモは以下。
See the Pen by シルルス (@ufpdxyu8mh998lt) on CodePen.
今回は月がネオン風に少しぼやけるアニメーションと２つの雲が流れるアニメーションです。
SVGアニメーションの基本は雨雲のアニメーションのときの記事を参照してください。
Inkscapeで以下のような画像を準備します。
ネオン風の月
月がネオン風に点滅するアニメーションです。
svgファイルを記述する部分に二つの円を用意します。
<circle
style="fill:#fbffff;fill-opacity:1;stroke:none;stroke-width:0.299045;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path846-5"
cx="136.15665"
cy="39.308826"
r="29.054346" />
<circle
style="fill:#fbff00;stroke:none;stroke-width:0.258;stroke-linecap:round;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
id="path846"
cx="136.34656"
cy="39.118927"
r="25.066494" />ブラーをかけたい白い円は黄色い円の裏に配置したいので順番的には白い円を先に記述します。
ベクターグラフィックソフトで順番が黄色が上で白が裏になっていればその通りにコピーすればよいです。
白い円のid=”path846-5″を覚えておきます。
そのcss部分をsvgのstyle要素に記述します。
#path846-5{
opacity: 0.5;
animation: light 4s linear infinite;
}
@keyframes light {
0% {
filter: blur(10px);
}
20%{
filter: blur(11px);
}
25%{
filter: blur(12px);
}
30%{
filter: blur(11px);
}
70%{
filter: blur(10px);
}
75%{
filter: blur(11px);
}
80%{
filter: blur(12px);
}
100%{
filter: blur(10px);
}
}先ほど記憶したidでcssを指定します。円にブラーをかけるのですが、id名の後のcircleの記述は不要のようです。
ブラーのかかり具合を調整することで点滅を表現しています。
雲左から右
次は雲が左から右に流れるアニメーションです。
左側の雲はストロークで描かれています。それをグループ化するのですが、Inkscapeで描いているときにグループ分けしておけばhtmlに張り付けたときグループ化する手間が省けます。
svgをテキストエディタで開いてhtmlに張り付けたのち、グループ名をcloud1としました。
svgのstyleは以下です。
#cloud1{
animation: move1 18s linear infinite;
}
@keyframes move1 {
from {
transform: translateX(-40%);
}
to{
transform: translateX(120%);
}
}始まりは雲の右端から始めたいので-40%、終わりは左端で終わりたいので120%にします。
雲右から左
次は二番目の雲です。
最初の雲と同様にグループ名をcloud2とします。
styleは以下です。
#cloud2{
animation: move2 21s linear infinite;
}
@keyframes move2 {
from {
transform: translateX(40%);
}
to{
transform: translateX(-90%);
}
}左端から始めたいので120%辺りから始めればよさそうですが、始まりはsvg画像が配置された位置が0%になるようで、そこから40%でちょうど画面から隠れるくらいでした。
終わりは-90%ですが、ちゃんと画面の外に到達します。
まとめ
今回は簡単な雲の流れを作りました。
今後も作品を増やしていきたいですね。
