transform & animation 흔들리는 버튼 질문

[심규진]

안녕하세요. 
transform & animation 흔들리는 버튼 숙제 할 때 이유는 없고 그냥 버튼을 궁극의 가운데 정렬하고 애니메이션을 줘봤는데요. 
흔들리는 애니메이션은 잘 동작하는데 hover 시 가운데 정렬을 위해 준 transform : translate(-50%,-50%);이 해제가 되는 현상이 발생합니다.
이유를 알고 싶습니다...

     

아래는 코드입니다.


-

[codingapple]

keyframes안에 transform: rotate() translate(-50%,-50%) 이렇게씁시다

[심규진]

감사합니다. keyframes안에 translate(-50%,-50%) 넣어서 해결했습니다!
근데 transform: rotate() translate(-50%,-50%) 순으로 쓰면 회전축이 오른쪽 끝으로 이동해서 회전하고
transform: translate(-50%,-50%) rotate() 순으로 써야 원하는대로 작동하는듯 합니다. 
같은 키프레임 안에 작성했는데도 원래 이렇게 순서에 따라 다르게 구현되는건가요?

[codingapple]

아마 오른쪽에 적은걸 먼저 실행해줍니다

[글쓴이]

글