スポンサーリンク

表示中のウェブページ内にある全てのCSSアニメーションを停止させる

Web系

最近、文章中に吹き出しを使った表現を入れるブログ記事を多々見るようになりました。それ自体は別に良いのですが、注意を引き付ける為か(?)、連続でアニメーションしているものがあります。

個人的に1つくらいならまだしも、それが段落として連続していたり、画面の表示領域内に複数配置されていると気が散ってしょうが無いのです…。

そんなことがあって、それらアニメーションを全て停止状態にさせるスクリプトを書きました。

let elem = document.getElementsByTagName('*');
let cssStyleDeclaration, animDuration;
for(let i = 0; i < elem.length; i++){
  cssStyleDeclaration = getComputedStyle(elem[i], null);
  animDuration = cssStyleDeclaration.getPropertyValue('animation-duration');
  if(animDuration !== '0s'){
    elem[i].style.animationDuration = '0s';
  }
}

ブラウザの開発者コンソールに張り付け…でも良いのですが面倒なので、例によってブラウザのブックマーク管理ツールより下記をURLとして登録し、ツールバーに置いてポチっとクリックするような方法で使います。

javascript:(function(){let%20elem=document.getElementsByTagName('*');let%20cssStyleDeclaration,animDuration;for(let%20i=0;i<elem.length;i++){cssStyleDeclaration=getComputedStyle(elem[i],null);animDuration=cssStyleDeclaration.getPropertyValue('animation-duration');if(animDuration!=='0s'){elem[i].style.animationDuration='0s';}}})();

※Firefoxで動作確認済み

これを書き始めた当初、animationプロパティをnoneにしようかと考えていましたが、”undefined”になってしまいました。コンソールでHTMLcollectioの中を見てみると、複数あるベンダープレフィックス付きのanimationプロパティは全て空っぽ…。実際、animationプロパティには複数の設定をまとめて書きますが、それらが各プロパティに割り振られる形でセットされる模様です。

しかし、これでも止まらないアニメーションがありました。それは、疑似要素で実現していたので、要素に直接スタイルを設定するという方法が使えません。

getComputedStyle関数の第二引数で”::after”および”::before”を指定して疑似要素のプロパティを取得出来るので、その値を条件として要素のクラス名を取得し、そのクラスの疑似要素にanimation-durationを0に設定するCSSを生成、createElementでstyleをheadの末尾にappendさせようとしましたが、なかなか上手くいかず。

落ち着いて考えてみれば、疑似であるか否かを含め、全ての要素に対して適用するなら全称セレクタで指定すれば良いですね。つまり

let styleElem = document.createElement('style');
styleElem.insertAdjacentHTML('afterbegin', '*,*:after{animation-duration:0s !important;}');
document.getElementsByTagName('head')[0].appendChild(styleElem);
javascript:(function(){let%20styleElem=document.createElement('style');styleElem.insertAdjacentHTML('afterbegin','*,*:after{animation-duration:0s%20!important;}');document.getElementsByTagName('head')[0].appendChild(styleElem);})();
Web系
スポンサーリンク
YUKIをフォローする
Wynes : Note