CSS Keyframe image appearing before it should - html

Question

I am having a tough time figuring out why my image within my keyframe (of the star) is showing up before the 50% keyframe. Right now it is showing up almost immediately.
What can I do to make it show up when I am wanting it to (after 50%)?
body {
background-color: #F5F5F5;
color: #555;
height: 100vh;
width: 100%;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star-container {
background-color: green;
color: white;
width: 60%;
height: 80%;
margin: 10% auto;
text-align: justify;
position: relative;
}
.star {
width: 250px;
height: 250px;
text-align: justify;
-webkit-animation-name: star;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-name: star;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes star {
0%, 21% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
}
22%,
45% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
}
49% {
background-color: red;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
border-radius: 50%;
}
50%,
100% {
/*shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );
shape-padding: 10px;
/*transition: all 1s ease; */
/*-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );*/
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
/* Standard syntax */
#keyframes star {
0%, 21% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
}
22%,
45% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
}
49% {
background-color: red;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
border-radius: 50%;
}
50%,
100% {
/*shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );
shape-padding: 10px;
/*transition: all 1s ease; */
/*-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );*/
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
}
<div class="star-container">
<div class="star">
</div>
</div>

Answer 1

Reason:
As I had mentioned in my reply to your comment here, the problem is because there is no background image specified in any of the frames before the 50% keyframe. This means that the UA treats it like a gradual change of background image from 0% to 50%. But since there cannot be a intermediate state for image display, it appears at roughly half duration between 0% to 50% for an animation with linear timing function (for other timing functions like ease, ease-in, ease-out it would be a little before or after the mid way point but the logic is the same).
Demo as proof of above point:
In the below snippet, I have set the animation-timing-function to linear and have inserted frames to change the background-color to yellow at 25% mark. You'd see how the image now appears at the exact same time when the color changes to yellow. This is to prove the statement in first para.
body {
background-color: #F5F5F5;
color: #555;
height: 100vh;
width: 100%;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star-container {
background-color: green;
color: white;
width: 60%;
height: 80%;
margin: 10% auto;
text-align: justify;
position: relative;
}
.star {
width: 250px;
height: 250px;
text-align: justify;
-webkit-animation-name: star;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-name: star;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
#keyframes star {
0%, 21% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
}
22% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
}
25% {
background-color: yellow;
}
45% {
background-color: yellow;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
}
49% {
background-color: yellow;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
border-radius: 50%;
}
50%,
100% {
/*shape-inside: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );
shape-padding: 10px;
/*transition: all 1s ease; */
/*-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px );*/
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
}
<div class="star-container">
<div class="star">
</div>
</div>
Solution:
The fix to this problem is to set background-image to none in all the frames before the 50% mark.
Demo: (Have removed all the vendor-prefixed versions to keep the snippet small)
body {
background-color: #F5F5F5;
color: #555;
height: 100vh;
width: 100%;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star-container {
background-color: green;
color: white;
width: 60%;
height: 80%;
margin: 10% auto;
text-align: justify;
position: relative;
}
.star {
width: 250px;
height: 250px;
text-align: justify;
animation-name: star;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes star {
0%, 21% {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
border-radius: 50%;
background-image: none;
}
22%, 45% {
background-color: red;
position: absolute;
left: 50%;
top: 90%;
height: 50px;
width: 50px;
border-radius: 50%;
background-image: none;
}
49% {
background-color: red;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
border-radius: 50%;
background-image: none;
}
50%,
100% {
background-image: url('http://optimumwebdesigns.com/images/star.png');
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
width: 50px;
}
}
<div class="star-container">
<div class="star">
</div>
</div>

Answer 2

Add animation-timing-function: linear to .star this will show the image exactly after 2s.