CSSアニメーションの開始位置をランダムにする

2020-11-08

開発

CSSアニメーションはロード直後に0%から開始するが、ページを開いていつも同じ場所から始まるのはつまらないのでJavaScriptで開始位置をランダムにしてみる。

デモ

15秒周期でグラデーションが変化するアニメーション。

常に0%からスタート

開始位置がランダム

リロードする度にグラデーションの開始位置が変わる。

ソース

animation-delayは負の値を指定することで、指定した分を遡った時間からアニメーションが始まっていたかのように表現でき、アニメーションのサイクルの途中から再生することができる。

これを応用し、JavaScriptでアニメーションする要素のstyle属性に乱数を当てはめる。

function random_animation(element, duration){
  const value = 'animation-delay:-' + Math.floor( Math.random() * duration ) + 's';
  document.getElementById('random').setAttribute('style', value);
}
random_animation('random', '15');

.colorbox {
  background: linear-gradient(230deg,#bb37b3,#378abb,#37bb4d);
  background-size: 300% 300%;
  animation: 15s sky ease infinite;
}

@keyframes sky{
  0%{
    background-position: 0% 84%;
  }
  50%{
    background-position: 100% 16%;
  }
  100%{
    background-position: 0% 84%;  
  }  
}

関連記事

CSSアニメーションだけでタイマーを作ってみた

animation-delayを応用しCSSだけで作ったタイマー。animation-delayの値をカスタムプロパティ（CSS変数）で計算した。