Scroll-driven Animations Sample

↓↓↓最後までスクロールしてください↓↓↓

<div class="box"></div>

body {
  height: 200vh;
}

@keyframes progress {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

.box {
  position: fixed;
  width: 100px;
  height: 100px;
  background: navy;
  animation: progress linear;
  animation-timeline: scroll();
}

元記事を表示する