[CSS] 움직이는 요소, 애니메이션 만들기: animation, @keyframes

CSS3에서 지원하는 애니메이션 효과! animation 애니메이션 효과를 적용하기 위해 애니메이션에 대한 키프레임(@keyframes)을 정의해야 한다. 키 프레임의 from에 처음 스타일을 정의하고, to에 마지막 스타일을 정의한다. 또는 %를 이용해 세부적으로 스타일을 정의할 수 있다. (시작인 0% ~ 종료인 100%) 예시 0의 위치에서 100px로 움직이는 모션 실행 @keyframes box-ani { from { transform: translate(0, 0); } to { transform: translate(100px, 100px); } } .box { display: flex; align-items: center; justify-content: center; width: 200px; ..