::view-transition-new

Baseline 2025

Newly available

Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: ì´ ê¸°ë¥ì ì¤íì ì¸ ê¸°ë¥ìëë¤.
íë¡ëì íê²½ìì ì¬ì©íê¸° ì ì ë¸ë¼ì°ì í¸íì± íë¥¼ ì£¼ì ê¹ê² íì¸íì¸ì.

::view-transition-new CSS ìì¬ ììë ì í íì ìíë¥¼ ëíë´ë ì¤ëì·, ì¦ ë·° ì íì ìë¡ì´ ë·° ìíë¥¼ ëíëëë¤.

ë·° ì íì´ ì´ë£¨ì´ì§ë ëì, ::view-transition-new ë ë·° ì í ìì¬ ìì í¸ë¦¬ ì ê¸°ì ë ê²ì²ë¼ ì°ê´ë ìì¬ ìì í¸ë¦¬ì í¬í¨ë©ëë¤. ì´ë ::view-transition-image-pair ì ìì ììë¡ë§ ì¡´ì¬íê³ , ë¤ë¥¸ ìì ììë ê°ì§ ì ììµëë¤.

ì´ ìì±ì ì¬ë°°ì¹ë ììì´ê¸° ëë¬¸ì, object-fit ì object-position ê°ì ìì±ì¼ë¡ ì¡°ìí ì ììµëë¤. ì´ ììì ìì° ì¹ìë ì½íì¸ ì í¬ê¸°ì ëì¼í©ëë¤.

css

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

/* 2ê°ì ì´ë¯¸ì§ê° ì¡´ì¬í  ë ë¸ë ë©ì ìí í¤íë ì */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from {
    mix-blend-mode: plus-lighter;
  }
  to {
    mix-blend-mode: plus-lighter;
  }
}

@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

ì°¸ê³ : ì¶ê°ì ì¸ ë·° ì í ì¤íì¼ì ::view-transition-new ì ì ëë©ì´ìì ì¤ì í ì ììµëë¤. ë·° ì í ì¤íì¼ì ë·° ì íì´ ì´ë£¨ì´ì§ë ëì ëì ì¼ë¡ ìì±ë©ëë¤. ë ë§ì ì ë³´ë setup transition pseudo-elements ì update pseudo-element styles ì¹ì ëªì¸ìë¥¼ ì°¸ê³ íì¬ íì¸í ì ììµëë¤.

êµ¬ë¬¸

css

::view-transition-new(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> ë ë¤ì ê°ë¤ì ê°ì§ ì ììµëë¤.

*: ìì¬ ììë¥¼ ëª¨ë ë·° ì í ê·¸ë£¹ì ëí´ ì¼ì¹íëë¡ í©ëë¤.
root: ìì¬ ììë¥¼ ì¬ì©ì ìì´ì í¸ê° ìì±í ê¸°ë³¸ root ë·° ì í ì¤ëì· ê·¸ë£¹ê³¼ ì¼ì¹íëë¡ í©ëë¤. ì´ ê·¸ë£¹ì íì´ì§ ì ì²´ì ë·° ì íì í¬í¨íê³ , view-transition-name ìì±ì íµí´ ê³ ì í ë·° ì í ì¤ëì· ê·¸ë£¹ì í ë¹ëì§ ìì ëª¨ë ììë¥¼ í¬í¨í©ëë¤.
<custom-ident>: view-transition-name ìì±ì íµí´ ìì¬ ììë¥¼ ì£¼ì´ì§ <custom-ident> ë¡ë¶í° í ë¹ë°ì ìì±ë í¹ì ë·° ì í ì¤ëì· ê·¸ë£¹ê³¼ ì¼ì¹íëë¡ í©ëë¤.

ìì

css

figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}