web-dev-qa-db-fra.com

Comment faire pour que la dernière image clé de votre animation «reste» une fois l'animation terminée

J'ai essayé de nombreuses itérations de cela, mais il ne semble pas vouloir simplement rester sur la dernière image clé.

Je ne sais pas ce que je fais mal ici.

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

Le remplissage d'animation devrait en prendre soin, mais pour une raison quelconque, ce n'est pas le cas. Toute aide serait appréciée.

csscss3css-animations
30
JSArrakis

Supprimez la double déclaration pour animation-fill-mode est juste 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;
}

La démo http://jsfiddle.net/DR9Lu/6/

50
DaniP