SVG画像にアニメーションをつける【HTML/CSS】

SVGで書き出したイラストやロゴは、CSSでパーツごとにアニメーションをつけることができます。

今回のためにウェブデザイナーのfuminoteさんが作成したイラストをSVGに書き出していただき、アニメーションをつけてみました。

fuminoteさんのnoteはこちらから。

fuminote｜note

使わせていただいたイラストの記事はこちらです。

アニメーションを付けたイラストはこちらからご覧になれます。

イラストを見る

作成手順

SVG画像を用意する

IllustratorやPhotoshopなどで作成したイラストをSVGファイルに書き出しをします。

ファイルをテキストエディタで開く

用意したSVGファイルをVSCoodeなどのテキストエディタで開きます。

アニメーションの設定

動かしたいタグにクラスをつけ、<style></style>の中にCSSアニメーションを記述します。

今回のfuminoteさんのイラストの場合は、書き出す時点でクラスが付与されていたので、それを利用して記述していきました。

楕円の動き1

.cls-1 {
  transform-origin:50% 50%;
  animation:3s forwards linear 1 rotation1, 3s linear 3s 2 rotation11 ;
}

@keyframes rotation1{
  0%{
    transform:rotate(0) scale(.5);
  }
  100%{
    transform:rotate(360deg) scale(1);
  }
}

@keyframes rotation11{
  0%{
    transform:rotate(0);
  }
  100%{
    transform:rotate(360deg);
  }
}

楕円の動き2

.cls-2 {
  transform-origin:50% 50%;
  animation:3s forwards linear 1 rotation2, 3s linear 3s 2 rotation22 ;
}

@keyframes rotation2{
  0%{
    transform:rotate(0) scale(.5);
  }
  100%{
    transform:rotate(-360deg) scale(1);
  }
}

@keyframes rotation22{
  0%{
    transform:rotate(0);
  }
  100%{
    transform:rotate(-360deg);
  }
}

右下のテキスト

.cls-3 {
  animation: 3s linear 1 fadeIn;
  animation-delay: 9s;
  animation-fill-mode : backwards;
}

@keyframes fadeIn{
  0% {
    opacity: 0;
  }
        
  100% {
    opacity: 1;
  }
}

真ん中で動く文字

@keyframes moveX1 {
  0% {
    transform: translateX(600px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moveX2 {
  0% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(0);
  }
}

SVGの動くロゴやイラストが欲しい方へ

ちょっとリッチなロゴやイラストが欲しいけど、自分で用意するのは難しいという方はぜひウェブデザイナーのfuminoteさんやProject Octに相談ください。

ご連絡お待ちしております。