Document

> 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/animation-timeline-co-phai-no-lam-viec-voi-thanh-cuon-ok.md). # animation-timeline có phải nó làm việc với thanh cuộn (ok) ### Example 1.1 Example 1 này rất quan trọng để hiểu chúng ta sử dụng đún thanh cuộn ``` /* Function with no parameters set */ animation-timeline: scroll(); /* Values for selecting the scroller element */ animation-timeline: scroll(nearest); /* Default */ animation-timeline: scroll(root); animation-timeline: scroll(self); /* Values for selecting the axis */ animation-timeline: scroll(block); /* Default */ animation-timeline: scroll(inline); animation-timeline: scroll(y); animation-timeline: scroll(x); /* Examples that specify scroller and axis */ animation-timeline: scroll(block nearest); /* Default */ animation-timeline: scroll(inline root); animation-timeline: scroll(x self); ```

**Sử dụng thuộc tính animation-timeline: scroll(block root); có nghĩa là sử dụng thanh cuộn của thẻ body** 🤡 còn nếu không sử dụng thì nó sẽ sử dụng animation-timeline: scroll(nearest); /\* Default \*/ ```scss /** * !CSS scroll-triggered animations */ .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: scroll(block root); } } @keyframes bg-move { from { background-size: 100% 100%; } to { background-size: 100% 40%; } } /** * CSS scroll-triggered animations! */ ``` ### Example 1.1 hoặc chúng ta có thể sử dụng cách đặt tên như này ```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! */ ```

Khi html, body cuộn nó sẽ tác động tới **box\_\_left-psucenter** ### Example 2

```html Document

``` ```scss #container { height: 300px; overflow-y: scroll; scroll-timeline-name: --squareTimeline; position: relative; } #square { background-color: deeppink; width: 100px; height: 100px; margin-top: 100px; animation-name: rotateAnimation; animation-duration: 1ms; animation-timeline: --squareTimeline; position: absolute; bottom: 0; } @keyframes rotateAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #stretcher { height: 600px; } ```

Tóm tắt bài viết ``` Các loại mốc thời gian sau đây có thể được thiết lập thông qua animation-timeline: + Dòng thời gian mặc định của tài liệu + Dòng thời gian tiến trình cuộn - Phần tử cung cấp dòng thời gian tiến trình cuộn có thể được chỉ định theo hai cách: scroll-timeline-name: --squareTimeline; 🔗 animation-timeline: --squareTimeline; animation-timeline: scroll(inline root); + Dòng thời gian tiến trình chế độ xem view-timeline-name: --subjectReveal; 🔗 animation-timeline: --subjectReveal; + Dòng thời gian tiến trình xem ẩn danh animation-timeline: view(axis inset); ```