title: Why CSS3 Animation is not working?
body: <p>Can someone help me to find out why animation on <code>&lt;h5&gt;</code> element doesn't work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;section id="hero"&gt;
      &lt;div class="content"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;h5&gt;Lorem Ipsum Demo Title&lt;/h5&gt;
              &lt;/div&gt;&lt;!-- row --&gt;
          &lt;/div&gt; &lt;!-- container --&gt;
      &lt;/div&gt; &lt;!-- content --&gt;
  &lt;/section&gt;&lt;!-- section --&gt;      </code></pre>
  </div>
  </div>
  </p>