Why my div element of class square goes back to rotation 0 degree when i use transform property in my animaton

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

You have to apply all the transforms in a chain otherwise you will overwrite the initial transform. So in this case, you have to give it rotation as well as the scale.

50% {
  transform: rotate(-45deg) scale(0.5);
  background: yellow;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

thanks for your answer and good tip

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.