Hy freecodecamp community you can see the code below ,
in the animation beat
at 0% keyframes i use the background of green but the rotation is still -45deg it doesn’t change.
at 50% keyframes
when I use transform property to change the scale of the element the rotation
changes and it goes to 0 deg
Html
<div class="square"> </div>
.square{
width: 100px;
height: 100px;
background: pink;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: rotate(-45deg);
animation: beat;
animation-duration: 8000ms;
animation-iteration-count: 1;
}
@keyframes beat{
0%{
background: green;
}
50%{
transform: scale(0.5);
background: yellow ;
}