CSS로 텍스트 애니메이션

by 

<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를 적용하는 것만으로도 애니메이션 효과를 낼 수 있습니다.

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

https://blogpack.1017

'추천 관련글,