😍Từ bài animation-timeline làm việc với thanh cuộn tìm ra cách sử dụng background-clip: text;

/**
 * !CSS scroll-triggered animations
*/
html,body {
  view-timeline-name: --test;
}
.box__left-psucenter {
  h2 {
    background-image: linear-gradient(to bottom,#574098 50%, #c500a4 50%);
    background-clip: text;
    color: rgba(0, 0, 0, 0);
    animation-name: bg-move;
    animation-timeline: --test;
  }
}
@keyframes bg-move {
  from {
    background-size: 100% 100%;
  }
  to {
    background-size: 100% 40%;
  }
}
/**
 * CSS scroll-triggered animations!
*/

Bình thường nếu sử dụng background-image nó sẽ dải màu tất cả khối nhưng giờ ta muốn áp dụng cho text thôi thì chúng ta nên sử dụng background-clip: text && color: rgba(0, 0, 0, 0);