実際のプロジェクトでのCSSアニメーション

Web開発者の間で、CSSアニメーション機能（遷移/アニメーション）のトピックがますます取り上げられています。ほとんどすべてのクライアント開発会議で、この新しい技術の素晴らしい利点について聞くことができます。



CSSアニメーションのパフォーマンスと柔軟性により、すばらしいことができますが、実際の大規模プロジェクトでは不安定で未熟なため、これらの新機能を既に使用できますか？



この投稿では、今日クライアント開発の新しいテクノロジーを使用することが非常に重要である理由と、途中であなたを待っているかもしれない困難について説明します。

仕様状況

W3CのCSSトランジションとアニメーションモジュールは「ワーキングドラフト」状態のままですが、Firefox、Opera、およびInternet Explorer 10はこれらのプロパティのプレフィックスを既に破棄しています。 プレフィックスを削除するということは、ブラウザのメーカーが既に技術の安定性に自信を持っていることを意味し、積極的に使用することをお勧めします。



JavaScriptのパフォーマンスの低さを参考に、アニメーションを通じてユーザーのユーザーエクスペリエンスを向上させることを大企業がまだ恐れている場合は、今こそインターフェイス開発アプローチを再検討し、CSS3機能の使用を開始するときです。

情報への飢え

ネットワーク上のライブプロジェクトにCSSアニメーションを導入した経験がないため、日常のタスクの実装に関する情報はほとんどありません。 業界の先駆者として行動することを恐れて、誰もがまだJavaScriptソリューションを使用しています。



巨大なサイズのDOMツリー、ページ上のアニメーション化されたブロックの数、高度なネスト、相互のブロックの多くのレイヤーなど、多くの要因の衝突により生じる特定のバグに直面すると、さらに苦しむ必要があります。 このような負荷に対処しようとすると、ブラウザは最適化アルゴリズムを最大限に活用しますが、これは不可解なバグにつながる場合があります。



最近、私たちはしばしばネットワーク上の言葉がないブラウザのバグに遭遇します。 その結果、問題を自分で調査し、バグレポートを作成し、それを修正するための異常な解決策を探す必要があります。



大手企業が新しいクライアント開発テクノロジーの使用を開始するのが早ければ早いほど、Web開発業界の開発は速くなります。

現実世界のCSSアニメーション

Webプロジェクトが新しいテクノロジーを飼いならそうとして、業界の先駆者になることを恐れなかったものを見てみましょう。



VKontakteは、単純な小さなブロックでアニメーションを部分的に使用し、単純な不透明度のアニメーションやテキストの色の変化でも、CSSではなくJavaScriptアニメーションを選択することがよくあります。 プロジェクトスタイルを検索すると、17個の遷移エントリが生成されます（プレフィックスを持つプロパティはカウントされません）。



Facebookでは、アニメーションも定着せず、すべてのスタイルで5つのトランジションエントリしか見つかりませんでした。私の目を引いたアニメーションはJSのみでした。



Google+のメンバーは、基本的にアニメーションを使用していないようです（おそらく、アニメーションの操作に関するChromeの問題が原因です）。移行エントリは3つだけです。 「アニメーション」を検索すると、Goolge +で1つの出現のみが返されました。



Odnoklassnikiのスタイルで記事を書いている時点で、140のトランジションと4つのアニメーション呼び出しがあります。アニメーションの一部は標準化され、多くの場所で再利用されています。



興味深いメモ-記事の最初のバージョンが作成されてから2か月が経過しましたが、この期間中、Odnoklassnikiを除き、上記のプロジェクトのアニメーションの数は増えませんでした-ソーシャルネットワークのアニメーションの数はほぼ3倍に増加しました。

アニメーション化する価値があるもの

インターフェイスを現実に近づければ近づけるほど、ユーザーにとってより明確になります。 人生では、即座にほとんど何も起こりません。ドアを開いたり、ラップトップを閉じたりすると、ウェブ上で発生するような鋭い「開閉」ではなく、多数の中間状態が観察されます。



ホバー、ドロップダウンメニュー、情報ツールチップに非表示のコントロールを表示する、最も一般的なアクションにもアニメーションを適用しようとします。 アニメーションは、さまざまな点滅と単収縮を使用して、ユーザーの注意をコントロールに集中させるのに役立ちます。



ある状態から別の状態へのコントロールと遷移のスムーズな相互作用は、ユーザーがページで何が起こっているかをよりよく理解するのに役立ちます。 アニメーションをボタンとスライダーだけに制限するのではなく、想像力を働かせてください。CSSプロパティをいくつか使用するだけで、インターフェイスをより快適にすることができます。

経験の交換

バグとソリューションの選択

CSS3アニメーションとバグの説明を使用する他の人の例に出くわすとき、私たちはしばしば問題をその特異性に帰し、問題に注意を払いません。 しかし、近い将来似たようなことをするつもりがない場合でも、何に対処しなければならないかを事前に知っておくことは有用です。



dabbletのデモページ 、例付きアーカイブ （ J. Disk ）。

オペラ

不透明度とボックスシャドウなどのアニメーションを組み合わせると、Operaで問題が発生する場合があります（ デモページのブロック1を参照 ）、ホバーでシャドウが完全に消える場合、アニメーションが後方にある場合、シャドウは遅れて戻り、予想される滑らかさはありません。

.no_sec { transition: opacity 1s, box-shadow 0; box-shadow: 0 0 5px 5px #000; } .no_sec:hover {opacity: 0; box-shadow: none;}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バグを回避するには、シャドウを個別にアニメーション化し、他の遷移速度値を選択する必要があります。

 .no_sec.shadow { transition: opacity 1s, box-shadow .3s; box-shadow: 0 0 5px 5px blue; } .no_sec.shadow:hover {opacity: 0; box-shadow: none;}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

擬似要素を持つブロックは、Opera 12で問題なくアニメーション化され、最初の例（ブロック2）と同様のアーティファクトが残り、Opera 11.64では安定して動作します。

 .pseudo { position: relative; transition: opacity 1s; } .pseudo:hover {opacity: 0;} .pseudo::after { content: 'pseudo'; position: absolute; left: 0; top: 100%; height: 10px; width: 100%; background: blue; font-size: 10px; line-height: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

擬似要素を破棄し、通常のタグを使用する必要があります。

Firefox

遷移で「s」（秒）の値を指定しない場合、Firefoxはアニメーションを完全に無視します（ブロック1）。 ブロック3では、Firefoxのシャドウアニメーションの作業値が設定されています。



さらに、Firefoxはドキュメントに従って厳密に動作します 。このドキュメントでは、時間の価値は測定の尺度によってのみ決定されるべきであり、他のブラウザーは開発者にとってより馴染みのあるアプローチを選択しています。

Webkit

Mac上のChrome（少なくとも第23バージョンまで）で、transformと変換（ブロック4）を併用する場合、および他の条件下で、ページ全体のテキストスムージングが中断します。



スムージングあり：





スムージングなし：

 .scale { transition: transform 1s; /*-webkit-backface- visibility: hidden;*/ } .scale:hover {transform: scale(1.5)}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

本文またはちらつきのあるテキストのブロックに適用されるbackface-visibility ：hiddenプロパティは、問題の解決に役立ちますが、そのような修正には結果もあります（以下の記事の詳細を参照）。さらに、テキストは永久にアンチエイリアスを失います。



ブロックがdisplay：block-> display：inline / inline-block（ブロック5）でプロパティを変更すると、Chromeで移行が機能しません。

 .inline b {opacity: 0; transition: opacity 1s; display: block; max-height: 0;} .inline:hover b {opacity: 1; display: inline; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題を回避するには、アニメーションを使用する必要があります（ブロック5.1）。

 @-webkit-keyframes reveal { from { opacity: 0; } to { opacity: 1; } } .inline.anim:hover b {-webkit-animation: reveal 1s;}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Windows上のChromeでは、スムーズな変換アニメーション中に、すべての入力が白い背景になります（変換のあるブロック4と入力のあるブロック6）。



backface-visibilityがページ要素に適用されている場合も、同様の効果が観察されます。 解決策はまだ見つかりません。

一般的なバグ

Webkitがバックグラウンドイメージの作業に移行する以外に、遅延を設定することさえできず、画像が即座に変更されます（ブロック7）。

 .bg_img { background: red url(image1.png); transition: background-color 1s linear, background-image 0s linear 1s; } .bg_img:hover {background: blue url(image2.png);}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この問題を解決するには、不透明度を使用して複数のレイヤーでアニメーションを組み合わせる必要がありました。



移行中、不透明度アニメーションを含むブロックは他のブロックと重なります。



問題を回避するには、下にアニメーションを必要としないブロックを家に置くか（自動的に高いz-indexを取得します）、または手動でz-indexを登録します（ブロック8.1）。



バグの例でページを更新すると、最初のバージョンの数か月後、この期間中に状況がまったく変化せず、ブラウザーの更新のいくつかのバージョンでこれらのバグがまだ修正されていないことが明らかになりました。

ご注意

CSSトランジションでは、アニメーションの速度を変更するなど、双方向のアニメーションを制御できます。

 .block {transition: 10s opacity;} .block:hover {opacity: 0; transition-duration: 1s;}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ホバーへの移行時の不透明度：0; 1秒で発生し、不透明度への逆の遷移：1; 10秒間続きます。 したがって、たとえば、「永久に」ホバリングする場合、非常に大きな遅延を使用してホバー状態のプロパティを残すことができます。



アニメーションを使用する場合、アニメーション中にブロックが外部の影響を受けないことを期待する必要があります（ホバーへの色の変更）。 これを行うには、最初に「animation-play-state：paused;」を使用してアニメーションを停止するか、「animation：none;」プロパティを使用してアニメーションを完全にゼロにします。



アニメーションを操作する場合、定期的に原点に戻って、最も古いCSS機能を再調査する必要があります。これは、疑似クラスactiveで判明したためです。

背面可視性

前に、webkitブラウザーのいくつかのバグの解決策としてbackface -visibilityについて言及しましたが、このプロパティはさらに大きな問題につながる可能性があります。 このプロパティの標準的な目的（3Dアニメーションブロックの裏側を隠す）に加えて、ハードウェアアクセラレーションを有効にするためによく使用されます。これにより、GPUを使用してブラウザーのページのレンダリング時間を短縮できます。



このプロパティを少なくとも1つのページ要素に適用すると、たとえば、すべての入力（アニメーションバグの選択の7番目の項目）の下に白い背景が表示されたり、テキストスムージングモードが変更されたりします。



ページの一部が既に描画された後にこのプロパティを動的に適用することにより、平均ページレンダリング時間が大幅に増加することが最近発見されました。 ほとんどの場合、これはページ全体が再描画されるGPUアクセラレーションモードへの移行によるものです。



アニメーション中のテキストのちらつきを避けるために、Mac上のChromeとSafariのbody要素に適用することにしたとき、このプロパティの結果に初めて遭遇しました。 同時に、多くの不可解なバグがSafari 5に現れ始めました。その結果、ページは完全に予測不可能な場所に移動しました。 Safari 6のリリースにより、状況は少し落ち着き、不運なプロパティに関するブラウザの動作は現在のChromeの動作と同等になりました。

オンサイト

次のブラウザの更新によるバグのプレッシャーの下でポータルが陥りたくない場合は、ブラウザの更新に常に注意を払い、開発者向けバージョンとプレビューバージョンを確認してください。



新しい技術と折りたたみプレフィックスのサポートを実装することに加えて、完全に安定したページレンダリング最適化アルゴリズムが新しいバージョンに付属することはありません。 ブラウザがGPUのレンダリングの一部をスローし始めていることを考えると、バグは特定のハードウェアを搭載したマシンでのみ再生できると期待することもできます。 同じブラウザの一部のコンピューターでは、ビデオカードが原因で3D変換が機能しない場合がありました。



安定したブランチでのChromeの21番目のバージョンのリリースに伴い、CSS3アニメーションに関連する不可解なバグの多くに対処する必要がありました。重大なバグの1つは、黒い斑点（Windows上のChromeのみ）のバグでした。不透明度アニメーション。 最も興味深いのは、バグが22番目の開発バージョンで修正された場合でも、安定バージョンと開発バージョン（Chromeで）が簡単に異なる可能性があることです。



Safari 6のリリースで興味深いケースが確認されました。更新により、ブラウザーはWebkitエンジンの開発ブランチから多くの変更を引き出し、現在のChromeの多くのバグを採用しました。

最適化

インターフェース開発チームの主なルールの1つは、できるだけ多くの純粋なCSSソリューションです。 JavaScriptの代わりにCSSを使用すると、インターフェイスの速度と開発時間の両方の面で、クライアントパーツのパフォーマンスが大幅に向上します。

すべてのバイト数

各プロパティを個別にリストする代わりに、短い略記法を使用します。

 transition-property: top; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0.5s;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

=

 transition: top 1s .5s;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ちなみに、最小限のアニメーションレコードは「transition：1s」で、残りのデフォルトプロパティは「all ease 0;」です。



開発者は、特定のアニメーション化されたプロパティを定義する代わりに、非合理的なアニメーションの使用例をよく目にします。

 transition: all … ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明確ではなく

 transition: opacity … ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらくこれは数文字を保存するのに役立ちますが、最終的には、アニメーション化されたブロックのいくつかのパラメーターを変更するときに、不必要な計算で何度もブラウザーをロードします。



また、接頭辞に従うことを忘れないでください。たとえば、-ms-animationプロパティと-ms-transitionプロパティはまったく存在しません。 Internet Explorerの10番目のバージョンには、プレフィックスが既に省略されています。 CSS プリプロセッサを使用すると、ミックスインを使用してプレフィックスを簡単に操作できます。

標準化

オブジェクト指向のCSSアプローチにより、反復的なプロパティを大幅に節約できます。 スタイル管理システムでは、アニメーションの標準化にも関係するOOCSSアプローチを積極的に使用しています。



再利用されたモジュールの1つの例を次に示します。

 .fade { transition: .3s opacity, visibility 0s .3s; visibility:hidden; opacity: 0; } .fade_in:hover .fade { transition-delay: 0s; visibility: visible; opacity: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この標準モジュールを使用すると、最も一般的なアニメーション効果のために繰り返し発生するコードの束を保存できます。 さらに、「可視性」プロパティを使用して、CSSアニメーションをサポートしないブラウザーの下位互換性を実装します。

おわりに

CSSアニメーションを扱う際に対処しなければならない多くの困難を見ると、努力は正当化されていないように見えるかもしれませんが、これは完全にそうではありません。



最初に、ユーザーインターフェイスの操作を改善する強力なツールを発見しました。これは、対応するJavaScriptと比較してクライアントのパフォーマンスに大きな影響を与えません。 このテクノロジーのネイティブ性により、ブラウザーはGPUの計算能力を使用しても、レンダリング要素の速度を最適化できます。



第二に、CSSアニメーションの柔軟性、既存および新規のインターフェースにテクノロジーを導入するスピードとシンプルさに非常に満足しています。 共通のアプローチを開発し、一度テクノロジーの機能を整理したので、多くの内部プロジェクトに簡単に適用できます。



第三に、CSSアニメーションでの作業は興味深いです！ テクノロジーの先駆者であり道を切り開くことよりも、もっとインスピレーションを与えるものは何でしょうか？ 新しいインターフェイスを作成するタスクにアニメーション要素が少なくとも1つある場合、その要素を操作するのははるかにエキサイティングになります。 称賛に値するコメントを聞いて、ベストプラクティスを偽のコーダーと共有することは特に素晴らしいことです。