Angular 9-简单的CSS动画-(不是Angular动画！)-如何向后重用关键帧(反向)？

在Angular 9中，可以通过使用CSS动画来实现简单的动画效果。如果要向后重用关键帧（反向），可以使用CSS的@keyframes规则和animation-direction属性。

首先，我们需要定义一个CSS动画，使用@keyframes规则来定义关键帧。例如，我们可以定义一个名为myAnimation的动画，其中包含两个关键帧from和to，分别表示动画的起始和结束状态：

@keyframes myAnimation {
  from {
    /* 起始状态的样式 */
  }
  to {
    /* 结束状态的样式 */
  }
}

接下来，在需要应用动画的元素上，使用animation属性来指定动画的名称、持续时间、重复次数等。同时，使用animation-direction属性来指定动画的播放方向。默认情况下，animation-direction的值为normal，表示动画正向播放。如果要实现反向播放，可以将animation-direction的值设置为reverse。

.element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-direction: reverse;
}

在上述代码中，我们将myAnimation作为动画名称，设置动画持续时间为1秒，并将动画方向设置为反向播放。

在Angular中，可以通过在组件的CSS文件中定义动画样式，并在组件模板中应用该样式来实现CSS动画效果。例如，在组件的CSS文件中定义动画样式：

@keyframes myAnimation {
  from {
    /* 起始状态的样式 */
  }
  to {
    /* 结束状态的样式 */
  }
}

.element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-direction: reverse;
}

然后，在组件的模板中，将动画样式应用到需要动画效果的元素上：