如何使用 css 反转动画？

Question

您好，我正在尝试反转细节和摘要的动画。当详细信息打开时，我可以制作动画，当我再次单击时，我不会反向制作动画。再次单击摘要时如何使动画起作用？谢谢你。这是我的 HTML 代码和 CSS

HTML

<details>
  <summary>I am awesome</summary>
  <p>Hi there this is an awesome paragraph</p>
</details>

CSS

html {
  height: 100vh;
}

body {
  height: 100%;
  display: grid;
  place-content: center;

  font-family: 'Montserrat', sans-serif;
}

details {
  background: mistyrose;
  padding: 4em;
  width: 20rem;
}

details:not(open) summary~* {
  animation: anim-rev .5s ease-in;
}

details[open] summary~* {
  animation: anim .5s ease-in;
}

@keyframes anim {
  0% {
    opacity: 0;
    margin-top: -50px;
  }

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

@keyframes anim-rev {
  0% {
    opacity: 1;
    margin-left: 0;
  }

  100% {
    opacity: 0;
    margin-top: -50px;
  }
}

Answer 1

似乎 'details' 元素有一些限制，我无法用这样的元素正确地做关闭动画。

相反我用了一点 JQuery 并制作了一个带有 ID 的 div。您可以查看下面的工作代码：（我尽可能少地修改了您的代码）

https://jsfiddle.net/Aljaz_code/265f0nkb/1/

JQuery 使用代码：

$(document).ready(function(){
    $("#details").click(function(){
        $("#details").toggleClass("closeclass");
    });
});

三角形的符号

content: "BC";

在单击之前显示指向光标

cursor: pointer;

如何使用 css 反转动画？

how to reverse animation using css?

html

css

css-transitions

css-animations