Menu
I have tried many iterations of this, but it doesn't seem to want to just stay on the last keyframe.
I'm not sure what I'm doing wrong here.
<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>
The animation fill should take care of it, but for some reason it's not.
769
Try turning off the animation looping option in the animation editor. It should be a circular arrow icon that is highlighted blue. It seems you have an animation loop on, you would have to turn it off in order to make it stay in its place, it should be somewhere around the pause/play button, you won't miss it.
The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
Use animation-fill-mode: forwards; The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Have you ever wonder about how we can pause the animation when it starts? We can use animation-delay property but it will only delay the start of the animation, once the animation starts it will continuously animate. Once the CSS keyframe animation starts, we cannot pause it unless we will use javascript.
Remove the dual declaration for animation-fill-mode is just 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; } The demo http://jsfiddle.net/DR9Lu/6/
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
