วิธีสร้างแอนิเมชันเครื่องพิมพ์ (Typewriter Animation) ด้วย CSS

ด้วยความช่วยเหลือจาก CSS Animations เราสามารถสร้างแอนิเมชันแบบเครื่องพิมพ์ (Typewriter Animation) ได้โดยใช้ JavaScript

ตัวอย่าง

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 2%; 
  font-family: Courier, monospace; 
  display: inline-block; 
} 
div > div { 
  overflow: hidden; 
  animation: enter 4s steps(30, end), blinker .65s step-end infinite; 
  white-space: nowrap; 
  font-size: 1.4em;; 
  border-right: 5px solid blue; 
} 
@keyframes enter { 
  0% { 
    width: 0% 
  } 
  100% { 
    width: 100% 
  } 
} 
@keyframes blinker { 
  0%, 100% { 
    border-color: transparent 
  } 
  50% { 
    border-color: blue; 
  } 
} 
</style> 
</head> 
<body> 
<div class="typewriter"> 
<div class="typewriter-text">This is what you've been waiting for..</div> 
</div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: