WEB

TEXT 슬라이드 효과주기

by 꽃지닷컴 posted Dec 14, 2017
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

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

Who's 꽃지닷컴

profile

Respect yourself and others will respect you

- 창의적 사고를 하자!

- 소규모 웹사이트 제작 및 수정 (24시간 항시대기)