Animer un élément incliné dans l'angle d'inclinaison en CSS

Question

Donc je le fais pour quelques lignes sur ma page Web.

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

En ce moment, l'animation sur .slant-decor fonctionne très bien, mais - comme vous pouvez le voir, il provoque une sorte d'effet bizarre sur les lignes. Ce que j'aimerais obtenir, c'est que l'animation suive l'angle d'inclinaison, créant ainsi un effet où les lignes glisseraient du haut de la page, à l'angle droit. Comment pourrais-je y parvenir?

Answer 1

Si ma compréhension est correcte, la définition d'un transform-origin: right top produirait l'effet que vous recherchez. La valeur par défaut pour transform-origin est 50% 50% (le point central de l'élément). Lorsque vous animez la hauteur, ce point change constamment et crée donc cet effet étrange. Si le transform-origin est défini sur un point fixe, ce problème sera évité.

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