키프레임

[HTML5&CSS3] 키 프레임(keyframes)을 통한 애니메이션 구현

keyframes과 몇몇 애니메이션 속성을 사용하면 간단한 애니메이션을 구현할 수 있습니다. 이를 이용해 div를 왼쪽에서 오른쪽으로 이동시키는 간단한 애니메이션을 구현해 볼 텐데 우선 다음과 같이 div를 생성하고 관련 스타일을 입혀줍니다. Web Page Design Hello, World! 이제 키프레임을 작성해 봅시다. 키프레임은 @keyframes [이름] 형태로 시작됩니다. 내부에 from과 to가 보이는데 시간대별로 from은 0% 상태일 때를, to는 100% 상태일 때를 의미합니다. 물론 0%, 100% 형태로 지정해도 무관합니다. 이번 예제에서는 처음에는 왼쪽 0위치였다가 50% 상태일 때는 200, 마지막에는 300 정도로 div박스를 움직여 보고자 합니다. 따라서 키프레임을 다음과 ..