css로 텍스트 애니메이션 적용하기

<style>

    .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) }
    }

</style>

<div class="parent"><div class="child">흐르는 텍스트 </div></div>

 

wow는 스크립트를 불러온 후 호출하는 방식이지만,

css 만으로 위로 올라가는 애니메이션 효과를 줄 수 있다.

이미지 슬라이드를 보는 느낌이 난다.

 

아래와 같이 변경하면  우측에서 왼쪽으로 흐른다.

 

 

overflow-X: hidden;

from { transform: translateX(3em) }/* 애니메이션 높이 */
to { transform: translateX(0) }