Анимировать перекошенный элемент в угол наклона в 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>