😄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 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll
/* 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 */
/**
* !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
/**
* !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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
</body>
</html>
#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 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#examples
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);
PreviousDifference between animation and transition in CSSNextTừ bài animation-timeline làm việc với thanh cuộn tìm ra cách sử dụng background-clip: text;
Last updated
Was this helpful?