在 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>