😄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 CSS NextTừ 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 1 year ago

Was this helpful?