CSS Secret Garden: Animated States_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

問題

ページの読み込み時にアニメーションが開始されないことがあります。多くの場合、マウスホバリング (:hover) やマウス押下 (:active) などのユーザー操作を通じてアニメーションをトリガーする必要があります。この場合、アニメーションの再生回数を制御できず、ユーザーがアニメーションを強制的に停止する可能性があります。たとえば、ユーザーがホバー ( :hover ) を介してアニメーションをトリガーした場合、アニメーションはマウスが要素の外に移動する前に終了します。このような例では何が起こるでしょうか?

あなたの答えが「アニメーションは現在の状態を維持する必要がある」または「アニメーションはプリセット状態にスムーズに移行する必要がある」の場合。デフォルトでは、アニメーションは停止し、突然元の状態に戻ります。場合によっては、この非常に微妙なアニメーションを受け入れることができる場合もあります。しかし、ほとんどの場合、それはユーザー エクスペリエンスに直接影響します。では、この行動を変えることはできるのでしょうか?

この問題を説明するために、簡単なページを作成することにしました (このページは、友人の Julian にプレゼントとして与えられました)。右側の円内の画像に注目してください。ユーザーが円の上にマウスを置くと、円内の画像がゆっくりと左にスクロールし始め、隠れた部分が表示されます。デフォルトでは、ユーザーが円形の画像からマウスを移動すると、画像はすぐに元の位置に戻るため、ユーザーに不快感を与えます。これは小さな Web サイトであり、この画像は Web サイトの中心部分であるため、目をつぶることはできず、この問題を解決する必要があります。

解決策

以下に示すように、非常に長い風景写真があるとします。

しかし、表示したいスペースは 150px X 150px のみです。正方形の。この問題を解決する 1 つの方法は、アニメーションを使用することです。画像のデフォルト表示は画像の左端から始まり、ユーザーが画像を操作すると、画像はゆっくりと左にスクロールします (たとえば、マウスがホバーしているとき)。画像の上）。単一の要素を使用し、background-position 値をアニメーション化することで背景画像を設定します。

<div class="panoramic"></div>.panoramic {    width: 150px;     height: 150px;    background: url("img/naxos-greece.jpg");    background-size: auto 100%;}

現時点では、次のようになります:

アニメーションやインタラクティブ効果はありません。実際に実行してみましょう。背景画像全体を変更するには、background-position を 0 0 から 0 100% まで手動で変更することがわかります。キーフレームを使用してみましょう:

@keyframes panoramic {    to {        background-position: 100% 0;    }}.panoramic {    width: 150px;     height: 150px;    background: url("img/naxos-greece.jpg");    background-size: auto 100%;    animation: panoramic 10s linear infinite alternate;}

これは正常に動作します。この効果は、左から右に見たパノラマのように見えます。ただし、サイドローディング アニメーションがトリガーされている間、これによってユーザーの注意が、たとえば旅行ページから逸れる可能性があります。ユーザーは、美しいパノラマ写真を見る代わりに、ナクソスに関するテキストを読むことだけに集中しようとする可能性があります。アニメーションは、ユーザーが画像の上にマウスを置いたときにのみトリガーされ、より鮮やかに見えます。そこで、最初に考えたのがこの企画です。

.panoramic {    width: 150px;    height: 150px;    background: url("img/naxos-greece.jpg");    background-size: auto 100%;}.panoramic:hover,.panoramic:focus {    animation: panoramic 10s linear infinite alternate;}

マウスが画像上にあるとアニメーションがトリガーされます。初期状態では画像の左端の部分が表示され、ゆっくりとスクロールして画像の他の部分が表示されます。ただし、次の図に示すように、マウスが画像の外に移動すると、画像が突然画像の左端に移​​動します。

私もこの問題を偶然発見しました。

この問題を解決するには、解決する方法を見つけなければなりません。必要なのは、アニメーションが適用されていないことです。これは、:hover がアニメーションの現在位置を記憶できないことを意味します。必要なのは、マウスが画像上にあるときにアニメーションが表示され、画像が左から右に移動し、マウスが画像の外に出るとアニメーションが一時停止されることです。ありがたいことに、アニメーションには、この効果を実現できるプロパティanimation-play-stateがあります。

そこで、アニメーションの一時停止状態を .panoramic に適用し、マウスホバリング ( :hover ) 時にアニメーションを再生します。アニメーションの再生やキャンセルは行われず、既存のアニメーションを一時停止して再開するだけなので、アニメーションが突然切り替わることはありません。最終的なコードと効果は次のとおりです:

.panoramic {  width: 150px;   height: 150px;  background: url("http://www.w3cplus.com/sites/default/files/blogs/2015/1507/naxos-greece-big.jpg");  background-size: auto 100%;  animation: panoramic 10s linear infinite alternate;  animation-play-state: paused;}.panoramic:hover,.panoramic:focus {  animation-play-state: running;}@keyframes panoramic {  to {    background-position: 100% 0;  }}