This is working, but the duration setting is ignored. What am I missing?

/

function onClick(e) {
  e.target.classList.add('clicked_media_transition')
  document.startViewTransition(() => {
    e.target.classList.add('expand')
  })
}

body {
  margin: 0;
}

div {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
}

.expand {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

::view-transition-group(clicked_media_transition) {
  transition-duration: 5s;
  transition-timing-function: ease-out;
}

.clicked_media_transition {
  view-transition-name: clicked_media_transition;
}

<div onclick="onClick(event)"></div>

This is working, but the duration setting is ignored. What am I missing?

https://jsfiddle/r76z0o8s/

function onClick(e) {
  e.target.classList.add('clicked_media_transition')
  document.startViewTransition(() => {
    e.target.classList.add('expand')
  })
}

body {
  margin: 0;
}

div {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
}

.expand {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

::view-transition-group(clicked_media_transition) {
  transition-duration: 5s;
  transition-timing-function: ease-out;
}

.clicked_media_transition {
  view-transition-name: clicked_media_transition;
}

<div onclick="onClick(event)"></div>

• css
• view-transitions-api

• @Yogi you're right! You should post that as the answer. – Joren Commented Nov 18, 2024 at 22:06

1 Answer 1

As mentioned by @Yogi:

Changing transition-duration: 5s; to animation-duration: 5s; seems to work.

In general, transition-duration is used between two distinct states (start/end), while animation-duration involves a sequence of keyframes. When you're trying to trigger the animation on click, the use of animation-duration should be used.