动画：之前无法正常工作

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

从您发布的图片来看，下面应该是您正在寻找的动画。

(请以全屏模式查看 sn-p，因为基本元素有很多定位，这不是答案的一部分)

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，因为它没有响应性（除非与视口单元一起使用），但既然您提到了base element has fixed width，它对您的情况应该不是问题。