안녕하세요.
transform & animation 흔들리는 버튼 숙제 할 때 이유는 없고 그냥 버튼을 궁극의 가운데 정렬하고 애니메이션을 줘봤는데요.
흔들리는 애니메이션은 잘 동작하는데 hover 시 가운데 정렬을 위해 준 transform : translate(-50%,-50%);이 해제가 되는 현상이 발생합니다.
이유를 알고 싶습니다...
아래는 코드입니다.
-
감사합니다. keyframes안에 translate(-50%,-50%) 넣어서 해결했습니다!
근데 transform: rotate() translate(-50%,-50%) 순으로 쓰면 회전축이 오른쪽 끝으로 이동해서 회전하고
transform: translate(-50%,-50%) rotate() 순으로 써야 원하는대로 작동하는듯 합니다.
같은 키프레임 안에 작성했는데도 원래 이렇게 순서에 따라 다르게 구현되는건가요?
아래는 코드입니다.
-
