Question about making the CSS heartbeat animation

HTML-CSS
1

Please could anyone explain why you would need to add the transform value rotate(-45 deg) to the @keyframe part when it was already applied to the class “heart”? Why would it not remain at -45 degrees throughout the animation?

.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;
    
  }

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

link to exercise: https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count

2

Transform can set multiple properties. If you set transform to be transform: scale(1) you are telling the page that the transform property should only be scale(1). This resets the rotate back to its default of 0. Every time we set transform we need to specify all the different values.

transform: scale(1) is the same as transform: scale(1) rotate(0)

4 Likes