2021年12月15日(水)
CSSのアニメーションを停止（無効）する方法
先日「CSSでhoverアニメーションの実行をPCのみに制御する」のタイトルでhoverアニメーションをスマホのみで実行させる方法を紹介しましたが、PCレイアウトではアニメーションを実行させて、CSSメディアクエリーでスマホレイアウトになった際にアニメーションを無効にする、という制御のやり方もあります。
指定方法はとくに記事にするほどの内容ではなかったりしますが、アニメーション動作を制御する視差効果に対する指定方法ふくめ、CSSアニメーションを無効にする方法を自分用メモとしてまとめておきたかったので紹介してみます。
アニメーションプロパティを停止（無効）する
CSSアニメーションの「animation」「transform」「transition」といったプロパティを無効にするには、「none」や「unset」を使用します。
CSSアニメーションを設定した状態で、CSSメディアクエリーで特定の画面サイズ以下でアニメーションプロパティを無効にする際の記述例は以下になります。
@media only screen and (max-width: 768px) { .animate { animation: none; transform: none; transition: unset; ...
0
15
2
8author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
テキストやボタンにグラデーションを付けてモダンデザインにするサンプル集
NEXT ›
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『CSSのアニメーションを停止（無効）する方法』についてまとめています。
この記事は特にアニメーション・CSS3・Android・Mac・iOS・Windowsについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
