Wie wird der letzte Keyframe Ihrer Animation nach Beendigung der Animation "bleiben"?

Ich habe versucht, viele Versionen von diesem, aber es scheint nicht zu wollen, bleiben Sie einfach auf dem letzten keyframe.

Im nicht sicher, was ich falsch mache hier.

<style>
#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;} 
}
</style>
</head>
<body>

<div id="container">
<div class="fadein transtart">
    <div id="centerhex"></div>
</div>
</div>

Die animation füllen Sie kümmern sollte, aber aus irgendeinem Grund nicht. Jede Hilfe wird geschätzt.

InformationsquelleAutor der Frage JSArrakis | 2013-12-26

  1. 42

    Entfernen Sie die dual-Erklärung für animation-fill-mode ist nur forwards :

    .fadein{    
  animation:fadein 1.5s;
  animation-timing-function:linear;
  animation-delay:1s;
  animation-fill-mode:forwards;
  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;
}

    Die demo http://jsfiddle.net/DR9Lu/6/

    InformationsquelleAutor der Antwort DaniP

Schreibe einen Kommentar