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>