动画 :before 不能正常工作

Question

问题
我想用 css 动画为 ::before 制作动画，但它一直失败。通常动画会在完成后保存动画状态（如果我将其设置为前进）。然而，这次没有。任何想法为什么它不起作用？

出于某种原因，它也在窃听...我希望它是一个顶部向上的三角形，让它折叠然后成为一个底部向上的三角形，所以像这样：

应该发生什么
开始： ▴
50%的动画：─
结束： ▾

它应该是什么样子的图（将白色更改为橙色以使图像中的差异可见）

我的代码
我的动画（完整代码见jsfiddle）

@-webkit-keyframes animateEnvelope {
    0% {border-width: 0px 400px 200px 400px;}
    2% {border-color: transparent transparent #999 transparent;}
    50% {border-width: 200px 400px 100px 400px;}
    52% {border-color: transparent transparent #999 transparent}
    99% {border-color: #ECF0F1 transparent transparent transparent;}
} 

@keyframes animateEnvelope {
    0% {border-width: 0px 400px 200px 400px;}
    2% {border-color: transparent transparent #999 transparent;}
    50% {border-width: 200px 400px 100px 400px;}
    52% {border-color: transparent transparent #999 transparent}
    99% {border-color: #ECF0F1 transparent transparent transparent;}
}

My JSFiddle

我尝试搜索 SO 和 Google，但没有找到适合我的结果。你们是我最后的希望

Answer 1

根据您发布的图片判断，下面应该是您要找的动画。

(请在全屏模式下查看代码段，因为基本元素有很多定位，这不是答案的一部分)

body {
  background-color: pink;
}

.base {
  width: 800px;
  height: 400px;
  background-color: #999;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 70%;
  left: 50%;
  margin: 0px 0 0 -285px;
  animation-fill-mode: forwards;
  animation-name: slideCardUp;
  animation-duration: 1s;
  text-align: center;
  border-radius: 3px;
}

@keyframes animateEnvelope {
  0% {
    border-width: 0px 400px 100px 400px;
    border-color: transparent transparent #999 transparent;
  }
  100% {
    border-width: 100px 400px 0px 400px;
  }
}

@keyframes animateEnvelope2 {
  0% {
    border-color: transparent #999 #999 #999;
    border-width: 0px 400px 100px 400px;
  }
  100% {
    border-color: white #999 #999 #999;
    border-width: 100px 400px 0px 400px;
  }
}

.base:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: transparent transparent #999 transparent;
  margin-top: -199px;
  animation-fill-mode: forwards;
  animation-name: animateEnvelope;
  animation-duration: 1.5s;
  animation-timing-function: linear;
}

.base:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: transparent #999 #999 #999;
  border-width: 0px 400px 100px 400px;
  margin-top: 0px;
  animation-fill-mode: forwards;
  animation-name: animateEnvelope2;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  animation-timing-function: linear;
}

<div class="base"></div>

它是使用两个伪元素（:before 和 :after）构造的。 :before 首先产生一个顶面的三角形，而 :after 一开始是一个实心方块。首先，:before 折叠然后 :after 动画（在 animation-delay 等于 :before 元素上的 animation-duration 之后）从实心块变为一个面向底部的三角形。

理想情况下，使用 clip-path 将是实现此类效果的最佳选择，但浏览器支持仍然有些差（因为它与 IE 不完全兼容），因此如果我们需要跨浏览器则不可行解决方案。通常不建议在这种情况下使用 border，因为它没有响应（除非与视口单元一起使用），但由于您已经提到，因此对于您的情况来说应该不是问题。

动画 :before 不能正常工作

Animating :before does not work properly

css

border

css-selectors

css-animations