SVG动画.skew测试

Posted 2020-10-23 HtmlUI

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、