W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2021

Re: [csswg-drafts] [css-contain-3][css-animations][css-transitions] Isolate animation side-effects? (#6398)

From: L. David Baron via GitHub <sysbot+gh@w3.org>
Date: Fri, 20 Aug 2021 15:15:36 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-902766586-1629472534-sysbot+gh@w3.org>
@andruud and I were just chatting about this proposal, and I wanted to write a few notes about one issue that we discussed.  It seems like one of the undesirable effects of this proposal is what happens when there are animations or transitions triggered by a container query change.

To make this somewhat concrete, suppose we have a component that has container queries that give it substantially different styles at (width < 300px) and (width >= 300px).  Then let's consider the 4 cases that result from crossing the following pairs of scenarios (which are intentionally using simple cases of transitions and animations rather than what might perhaps be more realistic ones):

* **transition-outside**: The component switches from its large to its small styles as a result of a transition.  That is, the component starts off with `transition: width 6s linear; width: 500px` and then a transition is triggered by setting `component.style.width = "200px"` (which causes the component to flip from its big styles to its small styles 4 seconds into the transition).

* **animation-outside**:  The component switches from its large to its small styles as a result of an animation.  That is, the component is styled with `animation: shrink 6s linear both` where the animation is:
@keyframes shrink {
  from { width: 500px }
  to { width: 200px }

* **transition-inside**: Content inside the component has a transition when the component switches from its large to its small styles.  That is, there's an element inside the component that has:
#heading { font-size: 12px; transition: font-size linear 3s; }
@container component (inline-size >= 300px) {
  #heading { font-size: 18px; }

* **animation-inside**: Content inside the component has an animation that begins when the small styles are first shown.  That is, there's content that has:
@container component (inline-size < 300px) {
  #logo { animation: roll-in 3s linear; }

With the current proposal above, I think the results are as follows (and I think these results are undesirable):

* transition-outside + transition-inside:  The transition inside the container starts at the same time as the outer transition, rather than starting four seconds later when the container actually switches to displaying its small-state styles.

* transition-outside + animation-inside: Same as previous case.

* animation-outside + transition-inside: The transition inside the container never happens at all.  Instead, the state jumps suddenly when the container switches into its small state.

* animation-outside + animation-inside: Whether the animation runs depends on what the base style (which is covered up by the animation) is.  If the width in the base style is less than 300px, then the animation runs when the page is loaded; if it's more than 300px then it never runs.

I think the expectation is probably that container-query-dependent animations and transitions inside the container should start when the container query starts to apply to layout and to non-animation styles.  It's possible this proposal could be modified to produce that result; part of such a modification would include having a style change event inside of the container when the container query evaluation changes, though other changes would be needed as well.

GitHub Notification of comment by dbaron
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6398#issuecomment-902766586 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 20 August 2021 15:15:37 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:26 UTC