Prompt Title: CSS Slide-in Effect

Để tạo hiệu ứng CSS hiện từ từ thẻ <div> từ phải sang trái, bạn có thể sử dụng thuộc tính animation kết hợp với keyframes. Dưới đây là ví dụ code CSS để tạo hiệu ứng đó:

cssCopy code
/* CSS */
@keyframes slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slide-in 1s ease-out;
}

htmlCopy code
<!-- HTML -->
<div class="slide-in">Nội dung của div</div>

Trong đoạn CSS trên, chúng ta định nghĩa keyframes slide-in để điều khiển hiệu ứng. Tại thời điểm 0%, thẻ <div> sẽ bị dịch chuyển sang phải 100% và có độ mờ (opacity) bằng 0. Tại thời điểm 100%, thẻ <div> sẽ không còn bị dịch chuyển và có độ mờ bằng 1.

Sau đó, chúng ta gán animation slide-in có thời gian 1s và hiệu ứng dễ dàng (ease-out) cho class slide-in. Khi bạn áp dụng class này cho thẻ <div>, hiệu ứng sẽ được kích hoạt và thẻ <div> sẽ hiển thị từ phải sang trái một cách mượt mà.

Chú ý: Bạn có thể tùy chỉnh thời gian và hiệu ứng của animation theo ý muốn bằng cách thay đổi các giá trị trong keyframes và animation.