CSS-アニメーションは右に移動

Question

私は現在CSSに問題があります。

https://jsfiddle.net/k9cfdofv/1/

そこでは ストライプ（平行四辺形）は下から来ることを見ることができますが、それは私がそれをしたい、その状態に入る前に、それが右に少し行きます。 だから私はそれが底から来て、最後にこのシフトなしで一番上に行きたい。

CSS-コード：

.stripe { 
    width: 100px; 
    height: 100px; 
    margin-left: 100px; 
    background: red; 
    transform: skew(-10deg); 
    animation: ani 1s linear 1 forwards; 
    position: absolute; 
    bottom: 10px; 
} 



@keyframes ani { 
    0% { 
     height: 0px; 
    } 
    100% { 
     height: 700px; 
    } 
} 

Answer 1

それは左下に斜めにされる要素のためのトランスフォームの原点を設定することによって行うことができます。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: 100px; 
 
    background: red; 
 
    transform: skew(-10deg); 
 
    transform-origin: left bottom; 
 
    animation: ani 1s linear 10 forwards; 
 
    position: absolute; 
 
    bottom: 10px; 
 
} 
 

 
@keyframes ani { 
 
    0% { 
 
    height: 0px; 
 
    } 
 
    100% { 
 
    height: 700px; 
 
    } 
 
}

<div> 
 
</div>