一般的な情報。
標準とプレフィックス
プロパティの移行、アニメーション、および変換は、長い間、すべての一般的なブラウザに実装されてきました。 2012年6月6日に、W3Cは、開発中のCSS 3.0標準のこの部分は劇的に変わらないことを発表し、すべてのブラウザが今日それを実装することを推奨しました。
フロントエンド開発者にとって、これは信頼できる標準の出現を意味します。 将来、ブラウザが非標準のプレフィックスプロパティを放棄することを恐れる必要はありません。結局、標準プロパティによって複製され、必要に応じて置き換えられます。
Internet Explorerの古いバージョンには、まもなくバージョン9が含まれる予定であり、どのような形式でも移行、アニメーション、および変換をサポートしていません。 IE7-9の場合、jsは「スタブ」であり、スライド間のスムーズな切り替えの効果は何もありません。
JSではなくCSSを使用する理由
CSSを使用して解決できる多くのタスクがあります：インタラクティブギャラリー、マルチレベルドロップダウンメニュー、3次元ダイアグラムの構築とアニメーション化...特に既成の開発の大部分を考慮して、JSですべてを実行できるのにCSSを使用するのはなぜですか？ 主な引数は次のとおりです。
- ほとんどの場合、CSS効果はブラウザーエンジンによって排他的に監視されるため、より高速です。 これは特にモバイルデバイスで顕著です。
- タスクを達成するために、JSおよび一般にプログラミング言語の知識は必要ありません。 原則として、CSSの編集は平均的なユーザーでも使用できます。 さらに、CSSの「breakを壊す」ことはJSよりはるかに困難です。
実装
BEM
そのため、CSSクラスの命名にはBlock Element Modifier（ BEM ）手法を使用しました。 一番下の行は、レイアウトが独立したブロックのページレイアウトに基づいているということです。 BEMによると、ブロックには要素を含めることができますが、ブロックの内部のみです。
スライダークラス：
.slider /* , */ .slider__radio /* */ .slider__item /* */ .slider__img /* */ .slider__number-list /* */ .slider__number /* */ .slider__number-after /* IE7 IE8, :after ::after */ .slider_count_X /* , X */
アニメーション
3つのスライドのキーフレームアニメーションシーケンスは次のとおりです。
@keyframes slider__item-autoplay_count_3 { 0%{opacity:0;} 10%{opacity:1;} 33% {opacity:1;} 43% {opacity:0;} 100%{opacity:0;} }
スライダーの実装の特徴は、すべてのスライドとすべてのボタンに同じアニメーションが割り当てられることです。
slider_count_3 .slider__item, slider_count_3 .slider__number-after { -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; animation: slider__item-autoplay_count_3 15s infinite; }
このアプローチでは、すべてのアニメーションをプレフィックスバージョン（@ -webkit-keyframes、@ -moz-keyframesおよび@ -o-keyframes）で複製する必要があるため、コードの量を大幅に削減できます。必要な（顧客による）スライド数。 各スライドのアニメーションを個別に説明すると、コードの量は数十キロバイトになります。
これを回避し、1つのアニメーションを使用してすべてのスライドとボタンを順番にアニメーション化するには、スライド+ボタンの各ペアに対して時間の経過に合わせてアニメーションの開始のオフセットを設定するだけで十分です。
.slider__item:nth-of-type(2), .slider__number:nth-of-type(2) > .slider__number-after { -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; } .slider__item:nth-of-type(3), .slider__number:nth-of-type(3) > .slider__number-after { -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; } ...
最初のペアについては、デフォルト値のままです-ゼロオフセット。
また、オフセットがスライドの数に依存せず、最大数について一度だけ記述できることも重要です。
その結果、スライド間のスムーズなアニメーション化された遷移は次のようになります。
ホバーポーズ
ユーザーが画面上のスライドを遅らせたいが、回転をオフにしたくない場合は、一時停止モードを使用してスライドにカーソルを合わせることができます。
.slider:hover .slider__item, .slider:hover .slider__number-after { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }
クリックスルー
html要素の状態を切り替える多くのCSS「イベント」があります。 マウスクリックについて説明する場合、これはページ要素の1つでチェックされているfocus、：target、または：の擬似クラスの外観です。 フォーカス擬似クラスは、一度にページごとに最大1つの要素を持つことができます。 the：ターゲット擬似クラスはブラウザの履歴を詰まらせ、「a」タグの存在を要求します。 the：チェックされた擬似クラスは、ページを離れる前の状態を記憶します。さらに、ラジオボタンの場合、特定のグループの要素を1つだけ選択できる場合は個別のスイッチになります-必要なもの。
.slider__radio { } .slider__radio:checked { }
レベル4未満のセレクターでは、+および〜近隣セレクターを使用して、ラジオボタンと組み合わせた場合にのみ、任意の要素の状態（スライドの不透明度など）を切り替えることができます。 隣人のスタイルと隣人の子孫のスタイルの両方を切り替えることができますが、いずれにしても、隣人はラジオボタンの後に配置する必要があります。
/* « » */ .slider__radio:nth-of-type(1) ~ .slider__item:nth-of-type(1) { opacity: 0.0; } /* «» */ .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1) { opacity: 1.0; }
スライドの不透明度スイッチが使用されました-写真を含むコンテナ。 これは、空のimg要素とは異なり、divコンテナーに追加情報（たとえば、スライドの名前、リンクを含む関連する説明など）を入れることができるため、画像のプロパティを切り替えるよりも普遍的な方法です。
スライドの場合、切り替えをスムーズにする遷移プロパティが示されます。
.slider__item { -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }
スライドを選択するときに回転を停止する
ユーザーがスライドを選択した場合、すべてのスライドとボタンのアニメーションを停止する必要があります。 これは、実行中のアニメーションのプロパティ値の優先順位が、同じプロパティの他のすべての値よりも常に高いという事実によるものです（インラインプロパティを中断することもできます！Important`om）。
各スライドには構造が同じであるにもかかわらずアニメーションがあり、すべてのスライドのアニメーションをオフにする必要があるため（そうでない場合、3つのスライドがスムーズな移行に参加します）、すべてのラジオボタンは最初のスライドの前に配置する必要があります。
<input class="slider__radio" id="1" type="radio"> <input class="slider__radio" id="2" type="radio"> <input class="slider__radio" id="3" type="radio"> ... <div class="slider__item">...</div>
さらに、すべてのボタン（ラジオボタンラベル）を個別のブロックにグループ化し、ラジオボタンの後に配置する必要があります。そうしないと、任意の数のスライドのユニバーサルラベルの配置に問題が発生する場合があります。
スライドを選択するときにすべてのスライドとボタンのアニメーションを停止するには、次のように設定します。
.slider__radio:checked ~ .slider__item, .slider__radio:checked ~ .slider__number-list > .slider__number-after { opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; }
スライドの任意の数
各スライドにはCSSアニメーションルールの「スタック」が必要であるため、スライドの数に応じてユニバーサルスライダーを作成することはできません。 そのような各「スタック」（説明されている場合）は、スライダーブロック修飾子を介して接続できます。
.slider_count_X
ここで、Xはスライドの数です。
一部の古いブラウザをサポートするために、最初のスライドはアニメーション化されていません。 このため、最初の画像のコンテナの不透明度は常に1.0です。 問題があります。他の2つのスライドをスムーズに切り替えると、最初のスライドが輝いています（これは、スライダーブロックの親の背景かもしれません）。 半透明の効果を削除するには、選択したスライドを除くすべてのスライドに遷移遅延を設定します。 選択したものに対して、z-indexは他のすべてよりも多く設定されます。
.slider__item { opacity: 1.0; position: relative; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; } .slider__radio:nth-of-type(1):checked ~ .slider__item:nth-of-type(1), .slider__radio:nth-of-type(2):checked ~ .slider__item:nth-of-type(2), .slider__radio:nth-of-type(3):checked ~ .slider__item:nth-of-type(3), .slider__radio:nth-of-type(4):checked ~ .slider__item:nth-of-type(4), .slider__radio:nth-of-type(5):checked ~ .slider__item:nth-of-type(5){ -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; z-index: 6; }
スライドがサイトの他の要素と競合しないように（たとえば、ドロップダウンメニューと6以下のz-indexが重ならないように）、可視性z-indexに必要な最小値を設定して、ブロックの独自のスタッキングコンテキストを作成します。
.slider { z-index: 0; }
だから
プログラミングスキルや特殊なライブラリがなくても、最終的に標準化されるまで、CSS 3.0を使用すると、複雑で興味深いタスクを実装できます。 説明されているインタラクティブスライダーは、現時点では、Runetユーザーの80％に対して完全に機能しています。 残りのほとんどのユーザー、つまりIE7-9ブラウザーのユーザーには、スライダーの主な機能を実装するjs「スタブ」を使用できます。
実例はここで見ることができます 。