0

divをロード時にアニメーション化して、高さ0pxから高さ全体にスケーリングしようとしています。これが私がこれまでに持っている関連するCSSであり、現在Chromeで開発しているので、-webkitプレフィックスしかありません。

#teaserbar {
  width: 100%;
  overflow: hidden;
  background-color: #333;
  -webkit-animation-name: barAppear;
  -webkit-animation-duration: 3s;
}

@-webkit-keyframes barAppear {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

そして関連するHTML：

<div id="teaserbar">
  <div class="container">
    <div class="sixteen columns clearfix">
      <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
  </div>
</div>

アニメーションを実際に機能させるのにほとんど成功していません。最初は、そのような高さのスケーリングの問題かもしれないと思いましたが、divの背景色のアニメーション化にも成功しませんでした。誰かが私の問題を解決するのに役立つかもしれないと思うなら、私は完全に匿名化された情報源を提供することができます。

助言がありますか？過去にCSSアニメーションが問題なく動作していたので、かなり明白な何かが欠けているに違いないと感じています。

編集： Mr_Greenの提案に従ってフィドルを作成しました。http：//jsfiddle.net/XYfE9/で入手できます。

4

1 に答える 1

3

他の人がコメントで指摘しているように、CSSアニメーションは高さの値の使用をサポートしていないようですauto。1つの解決策は、代わりに固定の高さを使用することです。

動的な高さをサポートする必要がある場合は、jQueryを使用して高さを測定し、測定した高さをアニメーションに適用できます。

考えられる方法の1つは、の周りにコンテナを追加すること#teaserbarです。コンテナを測定された高さに設定し、アニメーションに0％と100％の開始値と終了値を使用します。固定高さのコンテナ内の要素について、0％と100％を使用したクイックテストが成功しました。この解決策でページレイアウトに問題が発生するかどうかはわかりませんが、測定された高さを利用する方法が他にもある可能性があります。

デモ   （Webkitブラウザーのみを対象）

HTML

<div id="container">
    <div id="teaserbar">
        <p><a href="#jumper">Lorem ipsum dolor sit amet! &#8681;</a></p>
    </div>
</div>

CSS

@-webkit-keyframes barAppear {
    from {
        height: 0%
    }
    to {
        height: 100%;
    }
}

jQuery

$(document).ready(function(){
    $('#container').height( $('#teaserbar').height() );
});
于 2013-03-25T17:00:46.527 に答える