> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/tu-bai-animation-timeline-lam-viec-voi-thanh-cuon-tim-ra-cach-su-dung-background-clip-text.md).

# 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;

```scss
/**
 * !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);**