CSSのローディングアニメーション-モーフィングのアイコン効果

今日は、8ポイントとCSSのいくつかの行を持つアイコンをモーフィングローディングアニメーションを構築することによって創造を取得しましょう.
完全な記事を読むか、私にYoutubeでコードを見てください:

結果

マークアップ
今回、私たちはほとんどマークアップを必要としませんdiv.morph-loader が必要です.これは変化を通して形作られるでしょうclip-path ;

<div class="morph-loader"></div>

基本的なCSS
基本的なCSSコードは、サイジングについてですdiv そして、それに若干の色を与えて.The animation は、無限に頻繁に実行され、特別なcubic-bezier 機能を緩和する機能clip-path 次の形状にすばやく移行し、簡単な瞬間の形状を維持する.それで、最初はかなり急ですが、平らになります.

.morph-loader {
  display: inline-block;
  width: 12rem;
  height: 12rem;
  background: white;

  animation: 4s morph cubic-bezier(0.11,0.79,0.11,0.99) infinite;
}

アニメーションそのもの
現在、アニメーション自体のために、それは単にポリゴンのリストです、しかし、すべての多角形は正確に8ポイントから成ります.その後、ブラウザは、1つの多角形から次へモーフすることができます.さもなければ、それはちょうど「ジャンプ」です.

$path-octagon-small: polygon(
  37.5% 25%,
  62.5% 25%,
  75% 37.5%,
  75% 62.5%,
  62.5% 75%,
  37.5% 75%,
  25% 62.5%,
  25% 37.5%
);
$path-star: polygon(
  50% 0%,
  58% 42%,
  100% 50%,
  58% 58%,
  50% 100%,
  42% 58%,
  0% 50%,
  42% 42%
);
$path-shift-star: polygon(
  58% 42%,
  100% 50%,
  50% 50%,
  50% 100%,
  42% 58%,
  0% 50%,
  50% 50%,
  50% 0%
);
$path-thunder: polygon(
  60% 42%,
  80% 42%,
  40% 100%,
  38% 100%,
  55% 55%,
  35% 55%,
  60% 0%,
  80% 0%
);
 $path-triangle-1: polygon(
   25% 25%,
   75% 50%,
   25% 75%,
   25% 50%,
   25% 50%,
   25% 50%,
   25% 50%,
   25% 50%
 );
 $path-triangle-2: polygon(
   50% 25%, 
   100% 50%, 
   50% 75%, 
   50% 50%, 
   0% 25%, 
   0% 50%, 
   0% 75%, 
   50% 50%
 );

$clip-paths: (
  $path-octagon-small,
  $path-star,
  $path-shift-star,
  $path-thunder,
  $path-triangle-1,
  $path-triangle-2,
  $path-octagon-small,
);

そして最後に、そのリストから@keyframes が動的に生成される.まず最初にステップサイズを計算し、実際のパーセンテージを@keyframes ルール.各キーフレーム全体のすべての変更は、単にclip-path .

$step: 100% / (length($clip-paths) - 1);
$current: 0%;
@keyframes morph {
  @each $clip-path in $clip-paths {
    #{$current} {
      clip-path: $clip-path;  
    }

    $current: $current + $step;
  }
}

カラフルにする
すべての色でより大きいので、各ステップにいくつかの色の遷移を追加しましょう.したがって、私たちはアイコンがあるように多くのカラーコードを必要とします、そして、我々はちょうど各々のキーフレームにそれらを加えます

$colors: (
  #d4aee0,
  #44abac,
  #b2dd57,
  #fdc82e,
  #8975b4,
  #2ca7d8,
  #d4aee0
);

$step: 100% / (length($clip-paths) - 1);
$current: 0%;
$i: 1;
@keyframes morph {
  @each $clip-path in $clip-paths {
    #{$current} {
      clip-path: $clip-path;  
      background-color: nth($colors, $i);
    }

    $current: $current + $step;
    $i: $i + 1;
  }
}

そしてそれは既にです.自由に形で実験してください.あなた自身の図形を作成する場合は、Inkscapeと100 px x 100 pxキャンバスのようなものを使用して簡単ですので、座標はすでにポリゴンの正しい割合を提供しています.
また、先の多角形の最初の点が直接次の多角形の第1のポイントに補間されるので、点の順序が非常に重要であることに留意してください.これは素晴らしい効果(例えばスターからスターへシフト)を作成するか、それは非常に厄介なことができますが、これは実験の純粋な問題です.最も簡単な方法は、ポイントを介して「ロール」することです.つまり、最初のポイントをリストの最後まで移動させるか、または他の方法を繰り返します.