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>