목록인프런강의 (1)

프론트 개발 블로그

[CSS3] Animation TIP : Frame By Frame 애니메이션 구현하기

Frame By Frame 애니메이션 구현하기 1분 코딩님의 인터랙티브 웹 개발 제대로 시작하기 강의 참고 5100 X 300 사이즈의 스프라이트 이미지를 Frame By Frame 애니메이션으로 구현해야 되는 상황 TIP1. 가로, 세로 사이즈의 두배 사이즈의 이미지를 만든 다음에 CSS 상에서 절반으로 잘라서 사용하기 : 레티나 디스플레이와 같은 고해상도 디스플레이에서 px 직접도가 높은 고해상도로 표현됩니다. TIP2. animation-timing-function: steps() 속성을 사용하기 : 해당 속성을 지정해주지 않으면 -2550px 만큼 연속으로 흘러가는 애니메이션이 되는데, 해당 속성을 사용하면 steps 단계만큼 끊어지는 애니메이션을 구현할 수 있습니다. @keyframes spac..
CSS 2020. 8. 11. 15:27
이전 Prev 1 Next 다음