TEXT 슬라이드 효과주기

CSS

 

.css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

 

Body

<p class="css-typing">
This is a paragraph that is being typed by CSS animation.
</p>

 

 

# 적용

  - 레이아웃 슬라이드에 텍스트 타이핑(Typing) 효과

 

1. 레이아웃 → 편집 → CSS

2. 레이아웃 → 설정 → 슬라이드 구문 입력란에 문구 작성

 

 

 

https://paulund.co.uk/create-typing-effect