Inconsistent CSS animation with the details tag

Question

The animation accompanying the opening of the details element is rendered inconsistently. It may open smoothly using the "sweep" animation, or open immediately with no animation at all. This can be seen when opening and closing details, waiting several seconds, and opening it again. In my case, the animation is consistent only when clicking the element in quick succession.

I would like details to open smoothly every time with CSS. I am using Chrome.

.information {
    font-family: Verdana;
    font-size: 11px;
    text-align: left;
    position: absolute;
    top: 30px;
    left: 0x;
    color: #000;
    width: 332px;
}

.details1 {
    color: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 400px;
}

.details1[open] summary ~ * {
  animation: sweep .2s ease-in-out;
}

@-webkit-keyframes sweep {
  0%    {opacity: 0; margin-top: 10px}
  100%  {opacity: 1; margin-top: 0px}
}

◯


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

user_15377952 · Answer

The

element is notoriously difficult to animate with plain CSS.

A more organic method would have been to use the CSS transition property to animate between .details1[open] and .details:not([open]) but even that doesn't solve the problem.

From the MDN docs:

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time there's no built-in way to animate the transition between open and closed.

I recommend taking a look at this article to see how you can animate using WAAPI, which is a JavaScript solution.

Inconsistent CSS animation with the details tag

1 Answers