在CSS中为倾斜角度中的倾斜元素设置动画

Question

所以我在网页的某些行上这样做。

@keyframes dropHeader {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
.slant-decor {
  left: 50%;
  height: 100%;
  position: fixed;
  display: inline-flex;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.6s;
}
.slant-decor:after {
  width: 5px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  content: "";
  position: relative;
  margin-left: -5px;
  transform: skewX(-30deg);
  display: inline-block;
}
.slant-decor div {
  width: 19px;
  height: 100%;
  display: inline-block;
  margin-left: -4px;
  -ms-transform: skewX(-30deg);  /* IE 9 */
  -webkit-transform: skewX(-30deg);  /* Safari */
  transform: skewX(-30deg);  /* Standard syntax */
}
.decor-orange {
  background-color: orange;
}
.decor-red {
  background-color: red;
}
.decor-green {
  background-color: green;
}

<div class="slant-decor">
  <div class="decor-red"></div>
  <div class="decor-orange"></div>
  <div class="decor-green"></div>
</div>

截至目前，.slant-decor上的动画效果很好，但是 - 正如您所看到的，它会在线条上产生一种奇怪的效果。我想要实现的是动画也遵循倾斜角度，创建一种效果，其中线条将从页面顶部以直角滑入。我怎么能做到这一点？

Answer 1

如果我的理解是正确的，设置transform-origin: right top会产生您正在寻找的效果。 transform-origin的默认值为50% 50%（元素的中间 - 中点）。当您为高度设置动画时，此点会不断变化，从而产生奇怪的效果。如果将transform-origin设置为固定的点，则可以避免该问题。

@keyframes dropHeader {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
.slant-decor {
  left: 50%;
  height: 300px;
  position: fixed;
  display: inline-flex;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.6s;
}
.slant-decor:after {
  width: 5px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  content: "";
  position: relative;
  margin-left: -5px;
  transform-origin: right top;
  transform: skewX(-30deg);
  display: inline-block;
}
.slant-decor div {
  width: 19px;
  height: 100%;
  display: inline-block;
  margin-left: -4px;
  transform-origin: right top;
  transform: skewX(-30deg);
}
.decor-orange {
  background-color: orange;
}
.decor-red {
  background-color: red;
}
.decor-green {
  background-color: green;
}

<div class="slant-decor">
  <div class="decor-red"></div>
  <div class="decor-orange"></div>
  <div class="decor-green"></div>
</div>