我已经尝试了很多次迭代,但似乎并不想留在最后一个关键帧上.
我不知道我在这里做错了什么
- <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>
动画填充应该照顾它,但由于某种原因,它不是.任何帮助将不胜感激.
解决方法
删除动画填充模式的双重声明只是转发：
- .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;
- }
