为什么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 -->      

- Morgari

---

可能它正在工作。请再次检查。 - jobair ahmed

很遗憾，它不起作用 https://fiddle.jshell.net/f2c6L0ut/ - Morgari

我检查了Chrome和Firefox，它们可以工作，但在Fiddle中无法工作。 - jobair ahmed

好的，谢谢。在这种情况下，为什么对我可能不起作用？我正在准备一个纯HTML文件，其中包含一些样式（通过Bootstrap 3准备）。 - Morgari

你的浏览器里它不工作吗？ - jobair ahmed

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

- Mohammad Usman

---

哦，我真的忘记了。非常感谢你！ - Morgari

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




  

- Jatin Kalra

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)
    }
}

- UnUsuAL