title: How to make the last keyframe of your animation "stay" after animation is finished
body: <p>I have tried many iterations of this, but it doesn't seem to want to just stay on the last keyframe.</p>
  <p>I'm not sure what I'm doing wrong here.</p>
  <pre><code>&lt;style&gt;
  #container{
      position: relative;
      width: 100%;
      height: 100%;
      background-color: black;
  }
  #centerhex{
  background-image:url(http://i.imgur.com/4sZDtfK.png);
  background-repeat:no-repeat;
  background-position:center; 
  height:224px;
  width:210px;
  position:absolute;
  margin-left: -105px;
  margin-top: -112px;
  top:50%;
  left:50%;
  }   
  .fadein{    
  animation:fadein 1.5s;
  animation-timing-function:linear;
  animation-delay:1s;
  animation-fill-mode:forwards, none
  animation-iteration-count: 1
  -webkit-animation-iteration-count: 1
  -webkit-animation:fadein 1.5s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-delay:1s;
  -webkit-animation-fill-mode: forwards, none
  }
  .transtart{
  opacity:0
  }
  @-webkit-keyframes fadein { 
  0%{opacity:0;}
  50%{opacity:1;}
  60%{opacity:1;}
  100%{opacity:0.2;} 
  }
  @keyframes fadein {
  0%{opacity:0;}
  50%{opacity:1;}
  60%{opacity:1;}
  100%{opacity:0.2;} 
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id=&quot;container&quot;&gt;
  &lt;div class=&quot;fadein transtart&quot;&gt;
      &lt;div id=&quot;centerhex&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The animation fill should take care of it, but for some reason it's not.</p>