CSS animation typing

Mình hôm nay xin chia sẻ cách bạn sẽ làm animation kiểu đang gõ chư bằng CSS animation như thế nào

Những điều cần quan tâm

Trước hết, bạn sẽ cần 2 keyframe này

@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

@keyframes typewriter dùng để setting cho background chạy từ trái sang phải

@keyframes blink dùng để giả lập con trỏ chuột

Phần thứ 2 hai quan trọng bạn cần quan tâm chính là ::before và ::after của text mà bạn cần animation

h1::before,
h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

h1::before {
  background: var(--bg-color);
  animation: typewriter var(--typewriterSpeed)
    steps(var(--typewriterCharacters)) 1s forwards;
}

h1::after {
  width: 0.125em;
  background: black;
  animation: typewriter var(--typewriterSpeed)
      steps(var(--typewriterCharacters)) 1s forwards,
    blink 750ms steps(var(--typewriterCharacters)) infinite;
}

Ý tưởng cho coding animation này là chúng ta sẽ tạo 1 layer có background-color giống với background-color của text đó. Layer này ban đầu sẽ che mất toàn bộ chữ và lần lượt hiển thị từng chữ cái. Do đó, sẽ tạo cảm giác như đang đánh chữ từ bàn phím vậy. Ban đầu nếu chưa có animation sẽ giống như thế này

::before dùng để hide chữ và ::after dùng để giả lập trỏ chuột

Để dễ dàng hơn cho việc custom, chúng ta hãy sử dụng biến

:root {
  --bg-color: hsl(49 37% 94%);
  --typewriterSpeed: 6s;
  --typewriterCharacters: 16;
}

• –bg-color: dùng để set background-color cho text và ::before
• –typewriterSpeed: dùng để quy định thời gian của animation chạy trong bao lâu
• –typewriterCharacters: số kí tự

Vài giới hạn cần lưu ý

• Vì animation này chỉ chạy tốt khi text của bạn chỉ có một dòng. Cho nên, bạn cần đảm bảo text luôn hiển thị 1 dòng khi responsive.
• Với element có display block hoặc with là 100%, có thể animation sẽ không chạy đúng, vì vậy hãy sử dụng 2 CSS property này tùy thuộc vào nhu cầu sử dụng

width: max-content; //hoặc
display: inline-block;

• Nếu bạn sử dụng background image hay gradient, animation này sẽ không hoạt động như ý muốn

Kiến thức này mình được tiếp thu từ clip này trên Youtube, các bạn có thể tham khảo thêm