Keyframe animation appearing from the center - html

Question

I am creating a keyframe transition sequence. I am wanting the circle to appear for two seconds and then the star to appear for the other two seconds. I am running into a couple of issues.
Why is my star turning into a rectangle at the end of the animation?
How can I get the star to appear from the center rather than the top-left corner sliding in diagonally?
Why does my red circle disappear for a second or two and then the star appear?
Does anyone know what I am doing wrong?
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star {
background-color: #f1c40f;
color: white;
width: 250px;
height: 250px;
margin: 30px auto;
text-align: justify;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1 forwards; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1 forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
0%, 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);
}
/* Standard syntax */
#keyframes example {
0%, 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);
}
}
<div class="star">
</div>

Answer 1

Why is my star turning into a rectangle at the end of the animation?
That's because what probably is a typo error in the below line. You have set forwards to the iteration count property and so the animation-fill-mode takes its default value (which is none). This makes the div.star to snap back to its original shape (the one before start of the animation, a square) once the animation has completed. Removing the forwards from the below line and setting it to the correct property will solve this issue.
animation-iteration-count: 1 forwards;
How can I get the star to appear from the center rather than the top-left corner sliding in diagonally?
Well, getting the star to appear from center (as though its growing) is going to be almost impossible. I will explain the why part a bit later but why the star looks like it is sliding in diagonally is rather simple to explain. The element's initial dimension is 250x250, once the animation starts it is 50x50 and stays that way till 49% of the animation. At 50% no height or width is specified and so the element starts to grow gradually from 50x50 to its original size, which is. 250x250 (this growth will complete at 100%). Since the element has margin: 0 auto, it is always center aligned with respect to the container and so when it grows to its full size, it looks like the top-center point (50%, 0%) point is fixed and element expands towards right, left and bottom. Now this coupled with the clip-path produces the diagonal movement effect.
Snippet showing how the element grows without clip-path:
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star {
background-color: #f1c40f;
color: white;
width: 250px;
height: 250px;
margin: 30px auto;
text-align: justify;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes example {
0%, 49% {
height: 50px;
width: 50px;
}
50%,
100% {}
}
<div class="star">
</div>
Snippet showing the clip-paths effect at 5 stages during the growth:
Below snippet would make the reason for the slide more clear as you can see how the shape looks at 5 stages during the growth (from 50x50 to 250x250)
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star {
background-color: #f1c40f;
color: white;
margin: 30px auto;
text-align: justify;
-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
}
.dim-50 {
height: 50px;
width: 50px;
}
.dim-100 {
height: 100px;
width: 100px;
}
.dim-150 {
height: 150px;
width: 150px;
}
.dim-200 {
height: 200px;
width: 200px;
}
.dim-250 {
height: 250px;
width: 250px;
}
<div class="star dim-50">
</div>
<div class="star dim-100">
</div>
<div class="star dim-150">
</div>
<div class="star dim-200">
</div>
<div class="star dim-250">
</div>
Why does my red circle disappear for a second or two and then the star appear?
This is partly because of the clip-path and a lack of height and width setting within 50%, 100% keyframe. Since the element is only gradually growing from 50x50 to 250x250 (and it reaches its full size only by the end), the clip-path that you've designed based on original size (250x250) in mind actually starts working only at around 68.75% mark. This is because of the pixel values used in the clip-path. For example, the first point is 125,0 but the element's width is only 50px at 49% and so its width becomes 125px only at 68.75% (200px increase in 50% duration would mean 18.75% time for 75px increase assuming a linear timing function, for ease it'd be a bit longer but you get the point). Because of this, from the 50% mark approximately till the 68.75% mark you get to see nothing.
Another reason for the disappearance can also be attributed to the lack of a clip-path setting in the 0%, 49% keyframes. Because of this, the clip-path of the element is slowly animated from no clip at the start to the actual clip-path at 50% mark.
Solutions:
There are two solutions and they are as follows:
Use your original approach, add height: 250px, width: 250px and border-radius: 0% to the 50%, 100% keyframes. Set a dummy clip-path on the element at 0%, 49% keyframes.
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star {
background-color: #f1c40f;
color: white;
width: 250px;
height: 250px;
margin: 30px auto;
text-align: justify;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes example {
0%, 49% {
background-color: red;
height: 50px;
width: 50px;
border-radius: 50%;
-webkit-clip-path: polygon(0 0, 50px 0, 50px 50px, 0 50px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
}
50%,
100% {
height: 250px;
width: 250px;
border-radius: 0%;
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;
-webkit-clip-path: polygon(125px 0px, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
}
}
<div class="star">
</div>
Set the element's height and width as 250px at the start of the animation itself, use a circular clip-path with 25px radius to produce the circle. This way we can avoid the need for a dummy clip-path. I prefer this approach just because it needs no dummy clip-path.
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
}
.star {
background-color: #f1c40f;
color: white;
width: 250px;
height: 250px;
margin: 30px auto;
text-align: justify;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes example {
0%, 49% {
background-color: red;
height: 250px;
width: 250px;
-webkit-clip-path: circle(25px at center);
}
50%,
100% {
height: 250px;
width: 250px;
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;
-webkit-clip-path: polygon(125px 0, 175px 85px, 250px 90px, 190px 160px, 225px 250px, 125px 210px, 25px 250px, 60px 160px, 0px 90px, 75px 85px);
}
}
<div class="star">
</div>