web-dev-qa-db-ja.com

メディアクエリ内でのキーフレームアニメーションの定義

オブジェクトを画面の下部から「スライドイン」させようとしていますが、CSSで画面の高さを単位として取得できないため、次のようなメディアクエリでこれを実行しようとしています。

@media(max-height:500px) {
  @keyframe slideUp {
    0%    { transform: translate3d(0,500px,0); }
    100%  { transform: translate3d(0,0,0); }
  }
}
@media(max-height:750px) {
  @keyframe slideUp {
    0%    { transform: translate3d(0,750px,0); }
    100%  { transform: translate3d(0,0,0); }
  }
}
/* etc. */

これは機能しません（高さに関係なく最初のバージョンのslideUpを使用します）。したがって、一度定義されたキーフレームは、メディアクエリに基づいて上書きまたは再割り当てできないと思いますか？この効果を達成する方法はありますか（多くの異なるキーフレーム設定を持ち、メディアクエリを使用して適切なものをクラスに割り当てる以外に）？

csscss-animations
16
futuraprime

他の誰もこれを提案していない理由はありませんが、メディアクエリでキーフレームを設定する代わりに、メディアクエリでアニメーションを設定できます。

@media(max-height:500px) 
{
    #selectorGroup {
        animation: slideUp500 1s forwards;
    }
}

@media(max-height:750px) 
{
    #selectorGroup {
        animation: slideUp750 1s forwards;
    }
}


@keyframes slideUp500 {
    0%    { transform: translate3d(0,500px,0); }
    100%  { transform: translate3d(0,0,0); }
}

@keyframes slideUp750 {
    0%    { transform: translate3d(0,750px,0); }
    100%  { transform: translate3d(0,0,0); }
}
30
Simon_Weaver

この質問がされてから長い間。しかし、私が提供する解決策に誰も答えていないようです。これは、私の意見では、画面サイズごとに異なるmedia-queriesを作成するよりも簡単です。

@myajouriは、fixed位置を使用することを提案しましたが、ハードウェアアクセラレーションを取得するには、3D変換を使用する必要があるため、このソリューションを破棄しました。ただし、固定位置で3D変換を使用することはできます。 CSS変換では、パーセンテージを使用すると、要素自体のサイズに比例します。これにより、要素のサイズに関係なく、画面の外側から要素を移動できるため、必要なキーフレームアニメーションは1つだけです。次のスニペットを確認してください。

body {
  margin: 0;
  padding: 0;
}

.element {
  animation: slideUp 1s ease-in-out infinite alternate;
  background: #CCC;
  border: 5px solid gray;
  box-sizing: border-box;
  height: 100%;
  position: fixed;
  width: 100%;
}

@keyframes slideUp {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
<div class="element" />
2
ElChiniNet

画面や要素の高さに関係なくスライドアップアニメーションを実行する方法は、position: fixedを使用することです。

.box {
    position: fixed;
    animation: slideUp 1s forwards;
}

@keyframes slideUp {
    from { top: 100%; }
    to { top: 0; }
}

デモ：http://jsfiddle.net/myajouri/Kvtd2/

ビューポートではなく親要素を基準にしてスライドする場合は、代わりにposition: absoluteを使用してください。

2
myajouri

translate3dを使用してモバイルデバイスでハードウェアアクセラレーションを取得する必要があり（前述のとおり）、@media内でat-rulesを使用できない場合：

1つの@keyframesを大きなtranslateX（たとえば5000px）で定義し、画面の高さに基づいてanimation-durationを変更して、速度がほぼ同じになるようにすることができます。異なる高さ。

また、不要なスタイルの上書きを防ぐために、上限（max-heightのみ）ではなく高さの範囲（min-heightおよびmax-height）を定義します。

@keyframes slideUp {
    from { transform: translate3d(0,5000px,0); }
    to   { transform: translate3d(0,0,0); }
}

.box { animation: slideUp 5s forwards; }

@media (min-height: 0) and (max-height: 500px) {
    .box { animation-duration: 0.5s; }
}

@media (min-height: 501px) and (max-height: 750px) {
    .box { animation-duration: 0.75s; }
}

@media (min-height: 751px) and (max-height: 1000px) {
    .box { animation-duration: 1s; }
}

デモ：http://jsfiddle.net/myajouri/9xLyf/

0
myajouri