SVG动画测试.ZC01

1、ZC：貌似是 物体跑动 的一些动画效果，不知 与 心跳动画是否有关系...

2、测试代码：

<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>

 

3、

4、

5、