CSS3で実装された炎のアニメーション

<div class="コンテナ">
  <div class="赤い炎"></div>
  <div class="オレンジ色の炎"></div>
  <div class="黄色い炎"></div>
  <div class="白い炎"></div>
  <div class="青い円"></div>
  <div class="黒い円"></div>
</div>

体{
  背景：黒;
}

。容器{
  マージン:80px 自動;
  幅: 60ピクセル;
  高さ: 60px;
  位置:相対;
  変換の原点:中央下;
  アニメーション名: ちらつき;
  アニメーション期間:3ms;
  アニメーション遅延:200ms;
  アニメーションタイミング関数: easy-in;
  アニメーションの反復回数: 無限;
  アニメーション方向: 代替;
}

。炎{
  下:0;
  位置:絶対;
  境界線の右下の半径: 50%;
  左下の境界線の半径: 50%;
  左上の境界線の半径: 50%;
  変換:回転(-45度) スケール(1.5,1.5);
}

。黄色{
  左:15px; 
  幅: 30ピクセル;
  高さ: 30px;
  背景：ゴールド;
  ボックスシャドウ: 0px 0px 9px 4px ゴールド;
}

。オレンジ{
  左:10px; 
  幅: 40px;
  高さ: 40px;
  背景:オレンジ;
  ボックスシャドウ: 0px 0px 9px 4px オレンジ;
}

。赤{
  左:5px;
  幅: 50px;
  高さ: 50px;
  背景:オレンジ赤;
  ボックスの影: 0px 0px 5px 4px オレンジレッド;
}

。白{
  左:15px; 
  下:-4px;
  幅: 30ピクセル;
  高さ: 30px;
  背景：白;
  ボックスの影: 0px 0px 9px 4px 白;
}

。丸{
  境界線の半径: 50%;
  位置:絶対;  
}

。青{
  幅: 10px;
  高さ: 10px;
  左:25px;
  下:-25px; 
  背景: スレートブルー;
  ボックスの影: 0px 0px 15px 10px スレートブルー;
}

。黒{
  幅: 40px;
  高さ: 40px;
  左:10px;
  下:-60px;  
  背景：黒;
  ボックスの影: 0px 0px 15px 10px 黒;
}

@keyframes ちらつき{
  0% {変換: 回転(-1度);}
  20% {変換: 回転(1度);}
  40% {変換: 回転(-1度);}
  60% {変換: 回転(1度) スケールY(1.04);}
  80% {変換: 回転(-2度) スケールY(0.92);}
  100% {変換: 回転(1度);}
}