본문 바로가기
CSS/CSS 응용

[CSS]animate steps를 이용해 타이핑 효과 내기

by 알찬 퍼블리셔 2019. 5. 22.
728x90
반응형

간단하게 타이핑 효과를 구현할 수 있다.

 

 

 

 

width를 steps로 늘려가는 애니메이션 효과로 타이핑느낌을 낼 수 있다.

다만 일정한 width를 늘려가므로 띄어쓰기나 .과 같은 특수문자가 문장 중간에 끼여있다면 조금 어색한 느낌이 나거나 잘려나오는 효과가 나타날 수 있다.

 

 

 

좀더 정확하게 구현하고 싶다면 

자바스크립트를 이용해 구현할 수 있다

[javascript] - [JAVASCRIPT/JQUERY] 글자 타이핑 효과

728x90
반응형

댓글