BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS3 Animationが動作しないのはなぜですか？

2022-02-26 07:45:08

質問

のアニメーションが表示されない理由を教えてください。 <h5> 要素が動作しないのですが？ 

#hero h5 {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
  font-weight: strong;
  font-size: 28px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="hero">
    <div class="content">
        <div class="container">
            <div class="row">
                <h5>Lorem Ipsum Demo Title</h5>
            </div><!-- row -->
        </div> <!-- container -->
    </div> <!-- content -->
</section><!-- section -->

解決方法は？

を呼び出しています。 fadein アニメーションを定義していません。

CSS3 アニメーションは @keyframes ルールがあります。CSS3 アニメーションについての詳しい情報は ここで .

以下のCSSを追加します。 

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



#hero h5 {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
  font-weight: strong;
  font-size: 28px; 
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
  <div class="content">
    <div class="container">
      <div class="row">
        <h5>Lorem Ipsum Demo Title</h5>
      </div><!-- row -->
    </div> <!-- container -->
  </div> <!-- content -->
</section><!-- section -->

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します