Kevin Powell - Community•3mo ago

Why isn't this transitioning the width back @starting-style value when the hidden attribute exist?

I'm a learner and I want to keep it simple to understand the fundamentals. In this webpage, I am trying to test CSS transitions. I want to transition the paragraph width from small to big and back based on whether it's hidden or not but the transition fails to happen when transitioning from no hidden attribute to hidden. I want to know why and how can I do that while keeping it as simple as possible. Here's the page: https://cdpn.io/pen/debug/yyNjzwp?authentication_hash=VJMxxqaLZYRM I use a loop to make it disappear and reappear two times but the width only animates when it goes from hidden to no hidden attribute and not the other way. Here's the code just in case:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  

  <title>Untitled</title>

    <link rel="canonical" href="https://codepen.io/superhuman2/pen/MYwGExQ">
  
  
  
  
<style>
p {
  border: solid;
  inline-size: 89%;
  transition-property: inline-size;
  transition-duration: 3s;
  @starting-style {
    inline-size: 33%;
  }
  
}
</style>

  
  
  
</head>

<body>
  <p id="foo">This is a test</p>
  
      <script id="rendered-js" >
(async function () {
  for (let i = 0; i < 4; i++) {
    await new Promise(res => setTimeout(function () {
     foo.toggleAttribute('hidden');
      res();
    }, 5000));
  }
})()
    </script>

  
</body>

</html>

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  

  <title>Untitled</title>

    <link rel="canonical" href="https://codepen.io/superhuman2/pen/MYwGExQ">
  
  
  
  
<style>
p {
  border: solid;
  inline-size: 89%;
  transition-property: inline-size;
  transition-duration: 3s;
  @starting-style {
    inline-size: 33%;
  }
  
}
</style>

  
  
  
</head>

<body>
  <p id="foo">This is a test</p>
  
      <script id="rendered-js" >
(async function () {
  for (let i = 0; i < 4; i++) {
    await new Promise(res => setTimeout(function () {
     foo.toggleAttribute('hidden');
      res();
    }, 5000));
  }
})()
    </script>

  
</body>

</html>

Thank you in advance for your help!

15 Replies

Chris Bolson•3mo ago

Your codepen isn't visible. ~~In the code that you shared your JS is toggeling an attribute of "hidden" - what is this supposed to do? You haven't included any relevant code for that in the CSS (sorry if I am missing something)~~ Me being stupid I am not convinced that "hidden" is the best method to achieve what you need here as it is actually removing it from the flow, basically display:none. The reason it only annmates the width one way as becasue with the element is either hidden or not, there is no in-between state. As soon as the JS adds the "hidden" attribute, it hides it immediately, giving no time for any width "out" transition (not that you have defined one anyway).

SuperOP•3mo ago

I'm struggling to understand the real application of @starting-style because it works for more than just getting display to keep the element visible in the dom but the way it actually works is kind of very obscure to me. I get what you what you mean. But I'm having trouble understanding it and its use cases. Do you know any ressources that I can use to get more information about it. Maybe it's better to use css animations in this case

Chris Bolson•3mo ago

For what you are trying to do here, yes

SuperOP•3mo ago

But I hoped to somewhat still be able to achieve it with just transitions CSS transitions completed 50% of the job and refuse to do the rest

Chris Bolson•3mo ago

You are mixing three things here. Transitions, hidden attribute and JS. @starting-style really just defines the initial style of any given property. The properties defined willl then return to their normal state once the element has loaded. If you add transition, the property will transition from its starting style to its normal state according to the transition properties defined. (Note - not all properties are transitionable). There are 2 issues here. 1. By setting “hidden” the item is instantly hidden so, even if there were animations/transitions being applied, you wouldn’t see them. 2. You haven’t defined any transition for the width to go from 100% to 0% (not that it matters as you wouldn’t see it anyway) Animating width should really be enough. You don’t really need to hide anything. If you do need to toggle the display, you may need to take a look at allow-discrete.

SuperOP•3mo ago

But from what I learned, it seems there is a way to make the element stays visible for the entire transition and to only disappear when it's complete. I'm not really trying to make a webpage. I was just testing how does animating

display

display

hidden

hidden

attribute work and also what does

@starting-style

@starting-style

do exactly? I previously added

transition-property: inline-size, display;  
transition-behavior: allow-discrete;

transition-property: inline-size, display;  
transition-behavior: allow-discrete;

to the paragraph element and it didn't make a difference. I also tried to do the same thing using the

display: none

display: none

and

display: block

display: block

. It gave the exact same result. It seemed to me that discrete properties change values immediately at 50% of the transition when allow-discrete is set with the exception of the display property that will keep the element in a visible value until the transition is complete.

curiousmissfox•3mo ago

Ive never seen an ID attr on a script tag. What are you using it for ?

SuperOP•3mo ago

I didn't add it. It was generated by codePen

Chris Bolson•3mo ago

That is correct. From mdn:

Discrete animation behavior
Discrete-animated properties generally flip between two values 50% through animating between the two.

There is an exception, however, which is when animating to or from display: none or content-visibility: hidden. In this case, the browser will flip between the two values so that the transitioned content is shown for the entire animation duration.

MDN Web Docs

transition-behavior - CSS | MDN

The transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.

SuperOP•3mo ago

Can you tell me more about what does @starting-style do exactly? I also fail to understand the auto value of content-visibility. And I have already tried MDN and still fail to really understand them

Kevin Powell•3mo ago

@starting-style is the styles of the element when it first starts to transition. So, say you are going from a display: none to display: block, the instant it switches, the browser needs to know what it should initially look like when that switch happens. content-visibility is something you probably don't need to worry about, tbh 😄 you'd want to use it to prevent the browser from rendering content. usually you'd use this because you have something off-screen on initial page load (like, the user doesn't see it, they need to scroll to get to it), and it's causing performance issues. It has a lot of tradeoffs with how it uses containment, so unless you need it, I wouldn't use it.

SuperOP•3mo ago

Thank you, I think I understand the auto value now. Can you please tell me is there a way to make the animations work on the p element when it goes from having no hidden attribute to having one using CSS transitions. I'm already halfway through but can't find a way to make the transition work the other way.

Chris Bolson•3mo ago

Sorry, I missed your last question to me. It looks like Kevin has helped you understand it better. I'm already halfway through but can't find a way to make the transition work the other way. Can you share the code that you have to attempt to get the transition to work the other way? @starting-style won't help you here as it is just that, the starting style, not something that you can transition to later on.

Kevin Powell•3mo ago

You also need to transition the display property. All hidden does is a display: none.

Kevin Powell•3mo ago

this video should help you out 🙂 https://youtu.be/vmDEHAzj2XE

Kevin Powell

YouTube

We can now transition to and from display: none

Start writing CSS with confidence 👉 https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay 🔗 Links ✅ Great article from Chrome for Developers blog on this : https://developer.chrome.com/blog/entry-exit-animations ✅ Open Web Docs: https://openwebdocs.org/ ⌚ Timestamps 00:00 - Introduction 00...

Gaming

Programming

Why isn't this transitioning the width back @starting-style value when the hidden attribute exist?

Did you find this page helpful?