誰かが<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 -->
#hero h5 {
font-weight: strong;
font-size: 28px;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
<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 class="fade-in">Lorem Ipsum Demo Title</h5>
</div><!-- row -->
</div> <!-- container -->
</div> <!-- content -->
</section><!-- section -->
以下に示すように、fadeIn
という名前のアニメーションを定義する必要があります。
現在、アニメーションを使用していますが、作成したことはありません。
@keyframes fadeIn {
0% {
transform: translate(0,0)
}
30% {
transform: translate(5px,0)
}
55% {
transform: translate(0,0)
}
80% {
transform: translate(5px,0)
}
100% {
transform: translate(0,0)
}
}