1、ZC：CSS的動畫 裏面 沒有涉及到 translateX的相關信息，但是實際看到 圖形確實在右移。

　　ZC：我的理解：本來 元件的CSS樣式是有 translateX的，動畫裏面 確沒有，∴ 應該是 從 0%的-300px 逐漸 變成 90%的0px，90%-->100%之間沒有位移 只有傾斜的變化。

2、測試代碼（要保存成 html，不然會報錯。UTF-8編碼格式）

<svg width="500" height="500" viewBox="0 0 500 500"
    xmlns="http://www.w3.org/2000/svg">

    <line x1="400" y1="0" x2="400"
 
 y2="500" stroke="red" stroke-width="1" fill="none" />
    <rect x="300" y="150" width="100" height="100"/>
</svg>


<style id="jsbin-css">
rect
{
    transform: translateX(-300px) ;
    animation: run .5s ease-in-out;
    animation-fill-mode: forwards;
    transform-origin: bottom;
}

@keyframes run
 
{
    90% { transform: skew(10deg); }
    100% { transform: skew(0deg); }
}


</style>
<script src="https:////code.h5jun.com/js/render/edit.js?3.40.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https:////code.h5jun.com","root":"//code.h5jun.com"});</script>

3、

4、

5、

SVG動畫.skew測試