為什么CSS3動畫不起作用？

Question

有人可以幫我找出為什么<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 --> 

Answer 1

您正在代碼中調用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 --> 

Answer 2

 #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 --> 

Answer 3

您必須定義一個名為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)
    }
}