动画：之前不能正常工作

Question

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

出于某种原因，它也在喋喋不休...我希望它是一个三角形顶部，让它崩溃然后是一个三角形自下而上，所以像这样：

应该发生什么
开始：▴
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

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

（请以全屏模式查看片段，因为基本元素有很多定位，而不是答案的一部分）

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它使用两个伪元素（:before和:after）构建。 :before首先生成一个面向顶部的三角形，而:after在开始时是一个实体块。首先，:before折叠，然后:after动画（在animation-delay元素上等于animation-duration的{​​{1}}之后）从固定块到一个面朝下的三角形。

理想情况下，使用:before将是此类效果的最佳选择，但仍然有一些糟糕的浏览器支持（因为它与IE不完全兼容），因此如果我们需要跨浏览器解决方案，则无法使用。对于这样的情况，通常不建议使用clip-path，因为它没有响应（除非与视口单元一起使用），但由于您已经提到了base element has fixed width，因此它不应该是您的问题情况下。