Rectangle Turns To Square Why?

Question

So in the code below I'm trying some CSS transitions and transformations. When I hover on it the rectangle turns 90deg like it should. When I click off of it the 90deg rectangle turns into a square. Why does it turn into a square instead of back to a 0deg rectangle?
https://code.sololearn.com/Wwprq8H47i1T/?ref=app

Answer 1

move -webkit-transition and its value to article rule

Answer 2

-webkit-animation-fill-mode: forwards

appears to keep animation state after using keyframes.

https://stackoverflow.com/a/18457561

(By the way I just see a rectangle always; no squares appear here)

Answer 3

Seems like 'hover' no longer applies.

Answer 4

@Kirk Schafer Me too!

Answer 5

@Kirk Schafer Hmmm...well I am on mobile so that may be the problem

Answer 6

@Very_Hard(java & c++ & c# & py & rust & (AllHard)) Thanks for the answer. I moved the -webkit-transition and it worked I just had to specify which to animate.