Question

我的CSS3新手动画有什么问题？即使我将其设置为从 0px，到 100％，它也不会一直在屏幕上移动。

https://jsfiddle.net/VCUgrad08/38grd6co/

不幸的是，图片不会显示，但您可以看到后备文字正在移动以获得错误的要点。

var isValid = true;

if ($(this).data('clv_equals')) {
   isValid &= $(this).data('clv_equals') === $(this).val();
}

if ($(this).data('clv_notequals')) {
    isValid &= $(this).data('clv_notequals') !== $(this).val();
}

if ($(this).data('clv_regex')) {
    var regex = new RegExp($(this).data('clv_regex'));
    isValid &= regex.test($(this).val());
}

Answer 1

关键帧规则中的

to {transform: translateX(100%);}使svg容器移动它自己的宽度的100％，而不是父元素的移动

如果你知道svg元素的宽度，你可以使用这种类型的规则（在我的例子中，宽度将是320px）：

@keyframes pandaRight   {
  from {left: 0px;}
    to {left: calc(100% - 320px);}
}

https://jsfiddle.net/7t6gcfr0/

为什么我的CSS3 SVG对象动画会一直在屏幕上移动？

1 个答案: