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、