Javascript 如何在CSS中进行反向动画？

所以对于下面的代码，我有一个循环通知，它可以设置动画，打开左侧并显示信息和配置文件图像。我希望能够通过让圆圈向前覆盖信息并淡出（我已经输入）来反转动画。然而，我不知道如何实现这一点。我试过几种方法，比如切换动画，但似乎不起作用。有什么建议吗

您可以单击“关闭我”按钮关闭通知，也可以单击“打开我”按钮打开通知

$（文档）.ready（函数（）{
$（“.open”）。单击（函数（e）{
$（“.pgn包装”）.fadeIn（250）；
});
$（“.close”）。单击（函数（e）{
$（“.pgn包装”）.fadeOut（500）；
});
});
/*圆形动画
------------------------------------
*/
.pgn圆圈。警报{
边界半径：300px；
动画：fadeInCircle 0.3s向前移动，
调整圆的大小0.3s 0.4s三次贝塞尔（0.25,0.25,0.4,1.6）向前；
-webkit动画：fadeInCircle 0.3s轻松前进，
调整圆的大小0.3s 0.4s三次贝塞尔（0.25,0.25,0.4,1.6）向前；
高度：50px；
溢出：隐藏；
填充：6px 55px 6px 6px；
-webkit转换：translateZ（0）；
位置：相对位置；
}
.pgn包装器[data position$='-right'].pgn circle.alert{
浮动：对；
}
.pgn包装器[data position$='-left'].pgn circle.alert{
浮动：左；
}
.pgn圆圈.alert>div>div.pgn-thumbnail>div{
边界半径：50%；
溢出：隐藏；
宽度：48px；
高度：48px；
}
.pgn圆圈.alert>div>div.pgn-thumbnail>div>img{
宽度：100%；
身高：100%；
}
.pgn循环。警报>div>div.pgn-message>div{
不透明度：0；
高度：47px；
左侧填充：9px；
动画：fadeIn.3s.5s轻松前进；
-webkit动画：fadeIn.3s.5s轻松前进；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
单词break：打破一切；
单词包装：打断单词；
}
.pgn圆圈.alert>div>div.pgn-message>div p:独生子女{
填充：12px0；
}
.pgn圆圈。警报。关闭{
边缘顶部：-12px；
位置：绝对位置；
右：18px；
最高：50%；
不透明度：0；
动画：fadeIn.3s.5s轻松前进；
-webkit动画：fadeIn.3s.5s轻松前进；
}
.pgn圆圈。警报p{
页边距底部：0；
}
.pgn圆圈.警报>分区{
显示：表格；
身高：100%；
}
.pgn圆圈。警报>分区>分区{
显示：表格单元格；
垂直对齐：中间对齐；
}
@关键帧淡入圈{
0% {
不透明度：0；
宽度：60px；
}
100% {
不透明度：1；
宽度：60px；
}
}
@-webkit关键帧淡入圆圈{
0% {
不透明度：0；
宽度：60px；
}
100% {
不透明度：1；
宽度：60px；
}
}
@关键帧调整圆的大小{
0% {
宽度：60px；
}
100% {
宽度：300px；
}
}
@-webkit关键帧调整圆的大小{
0% {
宽度：60px；
}
100% {
宽度：300px；
}
}
@-webkit关键帧fadeIn{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.结束：目标{
动画：调整圆圈大小为1s all；
动画方向：交替；
}
@关键帧大小调整圆圈2{
0% {
宽度：300px；
}
100% {
宽度：60px；
}
}
/*标题
------------------------------------
*/
p{
显示：块；
字体大小：14px；
字体大小：正常；
字母间距：0.01em；
线高：22px；
保证金：0px 0px 10px 0px；
字体风格：普通；
空白：正常；
}
.bold{
字体大小：粗体！重要；
}
/*警觉的
------------------------------------
*/
.警惕{
背景图像：无；
盒影：无；
文本阴影：无；
填充：9px 19px 9px 15px；
边界半径：3px；
字体大小：13px；
边框宽度：0；
-webkit转换：所有0.2s线性0；
过渡：所有0.2s线性0；
}
.警报危险，.警报错误{
背景色：#c42827；
颜色：白色；
边框颜色：#933432；
}
.警报危险.关闭，.警报错误.关闭{
背景位置：-95px-10px！重要；
}
/*------------------------------------------------------------------
通知
--------------------------------------------------
*/
.pgn包装器[data position='top']{
排名：0；
左：0；
右：0；
}
.pgn{
位置：相对位置；
利润率：10px；
}
.pgn.警报{
保证金：0；
}

约翰·多伊

60秒后注销

好吧，你有大量的代码，我没有解析所有的代码，但我可以说，当你有这样的动画时：

@keyframes resizeCircle {
    0% {
        width: 60px;
    }

    100% {
        width: 300px;
    }
}

element:hover {
  animation:resizeCircle 1s all;
}

您正在指示宽度的起始和结束位置，因此要反转该位置，您需要确保此动画绑定到临时状态，如带有选择器的悬停，如下所示：

@keyframes resizeCircle {
    0% {
        width: 60px;
    }

    100% {
        width: 300px;
    }
}

element:hover {
  animation:resizeCircle 1s all;
}

然后，仅当元素处于悬停状态时，动画才会应用，而当元素未处于悬停状态时，动画将恢复到其原始状态

或者，可以设置一个单独的动画来指定反转特性值：

@keyframes resizeCircle2 {
    0% {
        width: 300px;
    }

    100% {
        width: 60px;
    }
}

并将其应用于“触发器”选择器，例如：

element:target {
  animation:resizeCircle2 1s all;
}

在这种情况下，当元素是单击的目标时，将应用反向动画。
以下是一个示例：

<div class="expandable"></div>

div.expandable {
  background-color: green;
  width: 30px;
  height: 25px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

div.expandable:hover {
  width: 300px;
}


可扩展分区{
背景颜色：绿色；
宽度：30px；
高度：25px；
-webkit过渡：宽度为0.4s，易于进出；
过渡：宽度0.4s，易于进出；
}
可扩展分区：悬停{
宽度：300px；
}

你可以在这里试一试：