これを何度も繰り返してみましたが、最後のキーフレームにとどまることを望んでいないようです。
ここで何が間違っているのかわかりません。
<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>
アニメーションの塗りつぶしで処理する必要がありますが、何らかの理由でそうではありません。任意の助けをいただければ幸いです。
animation-fill-mode
は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;
}