Please, I’d like to know why the transform property had to be repeated for the @keyframes beat (at 0% and 50%) on the Heartbeat animation challenge. Since that property had already been defined under the heart class, why repeat it again? do transformations return objects to original state such that they have to be transformed again during animation?
Do you have a link to the challenge or a sample of the code?
because you are using the transform property, which has default values for items that you do not explicitly state. For example CSS interprets this:
transform:scale(0.6);
as the same as
transform:scale(0.6) rotate(0deg);
You can see it for yourself by deleting the rotate part out of one of the keyframes and observe the effect in the preview window.
1 Like
Thank you, really helpful. Just also learned the transform property cannot be inherited, hence needs to be declared.