@ keyframes question

HTML-CSS
1

.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: “”;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: “”;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}

@keyframes backdiv {
50% {
background: #ffe6f2;
}
}

@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}

.heart has already been transformed to -45deg from the get go,
so why does it need to be rotated again for the animation? Why is this necessary:
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}

2

It doesn’t do anything, but you are changing the transform property by changing the scale… So in order to keep the ‘rotation’ of -45deg, you’ll need to add it in both declarations.