keyframes1 [CSS] transform, keyframes로 애니메이션 효과 주기 transform vs keyframes transform: 상태가 한번 바뀔때 사용 (a → b) keyframes: 상태가 여러번 바뀔때 사용 (a → b → a, a → b → c) transform 속성 1. rotate() 플러스는 오른쪽으로 마이너스는 왼쪽으로 회전 div { transform: rotate(90deg); } 2. translate() translateX는 X축 좌표로 translateY는 Y축 좌표로 이동한다 X, Y가 없는 translate()은 X, Y값을 모두 움직일 수 있다 엘리먼트를 움직이는 에니메이션을 줄 경우에는 padding, margin으로 이동하는 것보다 translate()이 더 빨리 움직인다 div { transform: translate(100px, 1.. 2022. 5. 10. 이전 1 다음
