Scroll progress animations in CSS

• Scroll progress animations in CSS

  • 把 css animation 绑定到 scroll progress timeline

  .progress {
    animation-timeline: scroll();
  }

  • scroll() 函数指定滚动容器和轴。默认值为 scroll(nearest block) ，也可以绑定到根容器 scroll(root block)

  .progress {
    animation-timeline: scroll(root);
    // 结合关键帧动画
    // 可简写为：animation: scaleProgress auto linear;
    animation-name: scaleProgress;
    animation-duration: auto;
    animation-timing-function: linear;
  }

• Using HTML landmark roles to improve accessibility

  • aria 规定了 8 个标志角色

  • banner

  • navigation

  • search

  • main

  • region

  • complementary

  • form

  • contentinfo

  • 使用 role 属性标记

    • <div class="banner" role="banner"></div>
      

  • 部分 html 元素自带角色标记