CSS animation-timeline动画时间线 - 详解

文章目录

CSS animation-timeline动画时间线

概述

CSS animation-timeline 将动画进度与特定事件（股东你、视口可见性）绑定。

语法

animation-timeline: 驱动方式;

  • scroll()：动画进度与页面或容器的滚动位置关联。
  • view()：动画进度与元素进入、离开视口的可见性关联。

使用

在这里插入图片描述

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
      <title>animation-timeline</title>
        <style>
          * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          }
          .navbar {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100px;
          background-color: #fff;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          }
          .navbar .scrollbar {
          width: 0%;
          height: 3px;
          background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);
          animation: anim 2s linear forwards;
          animation-timeline: scroll();
          }
          .content {
          width: 100%;
          height: 1500px;
          padding-top: 100px;
          }
          @keyframes anim {
          from {
          width: 0;
          }
          to {
          width: 100%;
          }
          }
        </style>
      </head>
      <body>
          <div class="navbar">
        <div class="scrollbar"></div>
        </div>
          <div class="content">
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        <p>这是一些文字</p>
        </div>
      </body>
    </html>

在这里插入图片描述

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
      <title>animation-timeline 视图时间线</title>
        <style>
          * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          }
          body {
          height: 3000px;
          }
          .box {
          position: sticky;
          top: 50px;
          width: 1000px;
          height: 500px;
          margin: 800px auto 0;
          }
          .box p {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 30px;
          }
          .box img {
          position: absolute;
          opacity: 0.2;
          animation: anim 1s linear forwards;
          animation-timeline: view();
          }
          .box .pic1 {
          top: 0;
          left: 0;
          width: 200px;
          }
          .box .pic2 {
          right: 0;
          bottom: 0;
          width: 200px;
          }
          @keyframes anim {
          from {
          transform: scale(1);
          opacity: 0.2;
          }
          to {
          transform: scale(1.5);
          opacity: 1;
          }
          }
        </style>
      </head>
      <body>
          <div class="box">
        <p>hello world</p>
            <img class="pic1" src="../../../assets/images/0.jpg" alt="">
              <img class="pic2" src="../../../assets/images/pic1.png" alt="">
            </div>
          </body>
        </html>
posted @ 2025-12-20 19:01  yangykaifa  阅读(9)  评论(0)    收藏  举报