如何使用css反转动画？答案

【问题标题】：how to reverse animation using css?如何使用css反转动画？
【发布时间】：2020-10-01 20:57:43
【问题描述】：

您好，我正在尝试反转详细信息和摘要的动画。当详细信息打开时，我可以制作动画，当我再次单击时没有反向动画。再次单击摘要时如何使动画正常工作？谢谢你。这是我的 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;
  }
}

【问题讨论】：

这能回答你的问题吗？ Transitioning between open close in details element
@alotropico 这不是我正在寻找的答案。你试过我的代码吗？当 details 具有 open 属性时，我的代码能够设置动画。我正在寻找的是在再次单击详细信息时反转动画

标签： html css css-animations css-transitions

【解决方案1】：

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

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

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

使用的jQuery代码：

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

三角形的符号

content: "\25BC";

在点击之前显示一个指向光标

cursor: pointer;

【讨论】：

啊..我明白了。谢啦。这就是我要找的