CSS 곡선 애니메이션, 패스애니메이션 따라하기
지난시간 Review 1. CSS 를 이용하여 기초적인 애니메이션이 가능합니다. 지난 시간에는 가장 기본적인 위치이동을 해봤습니다. 2. 두번째 포스팅 에서는 키프레임을 이용한 CSS 애니메이션을 만들어 봤습니다. CSS곡선 애니메이션 이번에 시도해 볼 CSS애니메이션은 곡선형태로 움직이는 CSS애니메이션 입니다. 아래 이미지와 같이 8자 형태로 움직이는 애니메이션 입니다. 직선으로 움직이지만 곡선처럼 만든다? 위와 같이 움지이기 위해서는 이미지의 X 포지션과 Y 포지션을 변경하면서 만들 수 있습니다. 그런데 아래 코드를 보면 X포지션과 Y포지션을 300픽셀 씩 이동하게 되는데, 실제 목적지는 우상단 300픽셀 지점이기 때문에, 사실 이대로 움직이게 되면 직선으로 우상단으로 움직이게 됩니다. 1 2 3 ..
IT공부방/HTML5, CSS
2020. 2. 22. 18:47
