[CSS] 왼쪽에서 오른쪽으로 서서히 나타나는 애니메이션 구현하기

홈페이지에 들어왔을 때, 메인을 차지하는 글씨가 왼쪽에서 오른쪽으로 서서히 나타나게 하고 싶었다. 그래서 사용한 방법이 animation! 처음 구현할 땐, 연습용 div가 나타났다가 사라지기도 하고, 생각처럼 간단하게 되지 않아서.. 다음을 위해 정리해보았다.

 

728x90

 

---

  

서서히 나타나는 애니메이션 구현하기

• 왼쪽에서 오른쪽으로 이동 : from left 10px > to left 50px
• 서서히 나타남 : opacity 0 > opacity 1
• 애니메이션 이름(animation-name) : anime
• 애니메이션 동작 시간(animation-duration) : 1.5s
• 애니메이션 동작 전후 설정(animation-fill-mode) : forwards (애니메이션이 끝난 후 그 지점에 그대로 있음)
• 애니메이션 시작 지연시간(animation-delay) : 0.1s
• 애니메이션 단계 별 재생속도(animation-timing-function) : ease_in_out (시작 부분의 재생 속도를 점점 빠르게 하고, 마지막 부분의 재생 속도를 점점 느리게 함)

See the Pen Untitled by anminyoung (@aldrn) on CodePen.

 

전체 코드

div {
    position: absolute;
    left: 10px;
    width: 100px;
    height: 50px;
    background-color: #000;
    color: #fff;
    opacity: 0;
    animation: anime 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 0.1s;
    animation-timing-function: ease_in_out;
}


@-webkit-keyframes anime {
    from {
        left: 10px;
    }
    to {
        left: 50px;
        opacity: 1;
    }
}

 

참고 블로그

 

https://webclub.tistory.com/621

CSS 애니메이션(Animation), 키프레임(keyframes)

https://webstoryboy.co.kr/1659

animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.