温江做网站

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

F

#g-box {
    animation-name: rotate;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-easing-function: linear;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

    F

#g-content {
    width: 300px;
    height: 170vh;
    background: #999;
}
#g-box {
    font-size: 150px;
    margin: 70vh auto 0;
    animation-name: rotate;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-easing-function: linear;
    animation-timeline: box-rotate;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@scroll-timeline box-rotate {
    source: selector("#g-content");
}

@scroll-timeline moveTimeline {
  source: selector("#g-content");
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

@scroll-timeline moveTimeline {
  source: selector("#g-content");
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}
div {
    animation-name: move;
    animation-duration: 3s;
    animation-timeline: moveTimeline;
}
@keyframes move{
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}

    
...文本内容...

#g-container {
    width: 100vw;
}
#g-container::before {
    content: "";
    position: fixed;
    height: 5px;
    left: 0;
    top: 0;
    right: 0;
    background: #ffc107;
    animation-name: scale;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timeline: box-rotate;
    transform-origin: 0 50%;
}

@keyframes scale {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@scroll-timeline box-rotate {
    source: auto;
    orientation: vertical;
}

1、我们在页面最上方，通过一个伪元素，实现一个占满屏幕 100% 的 5px 高的进度条。正常而言是这样：

2、通过设定一个 transform: scaleX(0) 到 transform: scaleX(1) 的动画，并且将它与 body 的滚动相绑定，即可得到滚动指示器，效果如下：

使用 scroll-offsets 精确控制动画触发时机

大家可以再看看上面的 Gif 图，都有一个问题，就是动画的开始时间都是从滚动一开始就开始了，刚好在滚动结束时结束。那么如果我希望动画在滚动的特定阶段触发，那该怎么办呢？

这里，就需要借助 scroll-offsets，去更加精确的控制我们的动画。

在滚动过程中，我们可以将一个元素，划分为 3 个区域：

• 滚动过程中，从上方视野盲区，进入视野

• 滚动过程中，处于视野中

• 滚动过程中，从视野中，进入下方视野盲区

在这里，我们就可以得到两个边界，上方边界，下方边界：

而对于上下两个边界，又会有两种状态。以上边界为例子，会有：

• 元素刚刚开始进入可视区

• 元素完全进入可视区

对于这两种状态，我们用 start 0 和 start 1 表示，同理，下方的边界也可以用 end 0 和 end 1 表示：

这里的 0 和 1 实际表示的是，元素滚动中预期可见的百分比。

有了这些状态值，配合 scroll-offsets，我们就可以精确控制滚动动画的触发时间。

我们设定一个从左向右并且伴随透明度变化的动画，的看看下面几种情况：

1、滚动动画在元素从下方开始出现时开始，完全出现后截止。

动画运行范围：end 0 --> end 1：

@keyframes move {
    0% {
        transform: translate(-100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}
@scroll-timeline box-move {
    source: auto;
    orientation: "vertical";
    scroll-offsets: 
        selector(#g-box) end 0, 
        selector(#g-box) end 1;

    /* Legacy Descriptors Below: */
    start: selector(#g-box) end 0;
    end: selector(#g-box) end 1;
    time-range: 1s;
}
#g-box {
    animation-name: move;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-timeline: box-move;
}

2、滚动动画在元素从下方完全出现时开始，在滚动到上方即将离开屏幕后截止：

动画运行范围：end 1 --> start 1：

// ...
@scroll-timeline box-move {
    source: auto;
    orientation: "vertical";
    scroll-offsets: 
        selector(#g-box) end 1, 
        selector(#g-box) start 1;

    /* Legacy Descriptors Below: */
    start: selector(#g-box) end 1;
    end: selector(#g-box) start 1;
    time-range: 1s;
}
// ...

3、滚动动画在元素滚动到上方即将离开屏幕后开始，完全离开屏幕后截止：

动画运行范围：start 1 --> start 0：

// ...
@scroll-timeline box-move {
    source: auto;
    orientation: "vertical";
    scroll-offsets: 
        selector(#g-box) start 1, 
        selector(#g-box) start 0;

    /* Legacy Descriptors Below: */
    start: selector(#g-box) start 1;
    end: selector(#g-box) start 0;
    time-range: 1s;
}

掌握 scroll-offsets 的用法是灵活运用滚动时间线的关键，当然，在上面你还会看到 start: selector(#g-box) start 1 和 end: selector(#g-box) start 0 这种写法，这是规范历史遗留问题，最新的规范已经使用了 scroll-offsets 去替代 start: 和 end: 的写法。

使用 @scroll-timeline 实现各类效果

在能够掌握 @scroll-timeline 的各个语法之后，我们就可以开始使用它创造各种动画效果了。

@scroll-timeline 的实验室特性与特性检测

@scroll-timeline 虽好，目前仍处于实验室特性时间，Chrome 从 85 版本开始支持，但是默认是关闭的。

在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性，Chrome 下开启该特性需要：

• 浏览器 URL 框输入 chrome://flags

• 开启 #enable-experimental-web-platform-features

美酒虽好，但是离完全能用，浏览器大规模支持还需要等待一会，给时间一点时间吧！

特性检测

基于目前的兼容性问题，我们可以通过浏览器的特性检测 @supports 语法，来渐进增强使用该功能。

特性检测的语法也非常简单：

@supports (animation-timeline: works) {
    @scroll-timeline list-item-1 {
	source: selector(#list-view);
	start: selector(#list-item-1) end 0;
	end: selector(#list-item-1) end 1;
        scroll-offsets:
            selector(#list-item-1) end 0,
            selector(#list-item-1) end 1
        ;
	time-range: 1s;
    }
    // ...
}

通过 @supports (animation-timeline: works) {} 可以判断浏览器是否支持 @scroll-timeline。

关于“CSS动画新特性@scroll-timeline怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号

版权所有：成都新网创想广告设计中心（普通合伙） 蜀ICP备11025516号-13