在 CSS 中以倾斜角度为倾斜元素设置动画答案

【问题标题】：Animate a skewed element in the skew angle in CSS在 CSS 中以倾斜角度为倾斜元素设置动画
【发布时间】：2017-05-18 10:51:51
【问题描述】：

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

@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 上的动画效果很好，但是 - 正如您所看到的，它会对线条产生一种奇怪的效果。我想要实现的是动画也遵循倾斜角度，从而产生线条从页面顶部以直角滑入的效果。我怎样才能做到这一点？

【问题讨论】：

标签： html css animation css-animations css-transforms

【解决方案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>

【讨论】：