2023年07月26日(水)

CSSアニメーションがView Transitions APIで進化する！ パネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなデモ -Rediento

• 0
• 58
• 90
• 63

@import "https://unpkg.com/open-props" layer(design.system);

@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

::view-transition-group(*) {

  animation-timing-function: var(--ease-squish-1);

  animation-duration: .75s;

}

@layer demo {

  .bento {

    display: grid;

    grid-template-columns: 2fr 1fr;

    grid-template-rows: 1fr 1fr;

    gap: var(--size-3);

    

    min-inline-size: 50vh;

    aspect-ratio: var(--ratio-widescreen);

    

    & > :not(legend) {

      ...