CSS로 자라나는 텍스트 애니메이션 만들기

간단한 CSS 특성을 활용해서 블로그나 포트폴리오 웹사이트에 텍스트 애니메이션을 적용할 수 있습니다.

구조는 단순하지만, 꽤 그럴듯한 애니메이션 효과를 보여줍니다.

영역 바깥에 위치한 자식 요소는 보이지 않도록 부모 요소에 "overflow-y: hidden;" 속성을 부여하고, 이동시킬 자식 요소를 부모 요소 바깥 밑 위치에서부터 위로 이동시키는 키프레임 애니메이션을 만들어서 자식 요소에 적용하면 됩니다.

부모 요소 높이, 자식 요소의 텍스트 크기, 키프레임 애니메이션의 Y축 이동 높이를 같게 해주는 것이 중요합니다.

위에 보이는 "텍스트 애니메이션"의 HTML과 CSS 코드는 다음과 같습니다.

<div class="parent"><div class="child">텍스트 애니메이션</div></div>

.parent {
    height: 3em; /* 애니메이션 높이 */
    overflow-y: hidden;
    display: block;
}
.parent .child {
    font-size: 3em;/* 애니메이션 높이 */
    font-weight: bold;
    line-height: 1;
    animation-name: grow;
    animation-duration: 1s;/* 애니메이션 시간 */
}
/* 키프레임 애니메이션 */
@keyframes grow {
    from { transform: translateY(3em) }/* 애니메이션 높이 */
    to { transform: translateY(0) }
}

여러 줄에 텍스트 애니메이션을 동시에 적용하면 다음과 같이 애니메이션 효과를 만들 수 있습니다.

<div class="wrap">
    <div class="parent"><div class="child">어포스트</div></div>
    <div class="parent"><div class="child">텍스트 애니메이션</div></div>
    <div class="parent"><div class="child">포트폴리오</div></div>
</div>