꿈꾸는 개발자의 블로그

홈페이지에 들어왔을 때, 메인을 차지하는 글씨가 왼쪽에서 오른쪽으로 서서히 나타나게 하고 싶었다. 그래서 사용한 방법이 animation! 처음 구현할 땐, 연습용 div가 나타났다가 사라지기도 하고, 생각처럼 간단하게 되지 않아서.. 다음을 위해 정리해보았다. 서서히 나타나는 애니메이션 구현하기 왼쪽에서 오른쪽으로 이동 : from left 10px > to left 50px 서서히 나타남 : opacity 0 > opacity 1 애니메이션 이름(animation-name) : anime 애니메이션 동작 시간(animation-duration) : 1.5s 애니메이션 동작 전후 설정(animation-fill-mode) : forwards (애니메이션이 끝난 후 그 지점에 그대로 있음) 애니메이션 시..