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>