Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
SVG笔划划线数组CSS动画逆转方向?_Css_Svg_Jquery Animate - Fatal编程技术网

SVG笔划划线数组CSS动画逆转方向?

SVG笔划划线数组CSS动画逆转方向?,css,svg,jquery-animate,Css,Svg,Jquery Animate,我有一个简单的路径,我用CSS应用了一个破折号数组和一个破折号偏移量。然后我将为这个简单的构造制作动画。动画将更改虚线阵列和偏移以减小大小,然后再次增大大小 奇怪的是,运动似乎在中途逆转。有人能帮忙吗?我敢肯定它实际上并没有反转,但数学正在造成意想不到的视觉效果 .path{ 行程数组:10; 行程偏移:10 30; 动画:直线无限; } @关键帧破折号{ 50%{ 行程偏移:35%; 行程:087.5%; } } 根据 如果关键帧规则未指定动画的开始或结束状态(即0%/from和100%/

我有一个简单的路径,我用CSS应用了一个破折号数组和一个破折号偏移量。然后我将为这个简单的构造制作动画。动画将更改虚线阵列和偏移以减小大小,然后再次增大大小

奇怪的是,运动似乎在中途逆转。有人能帮忙吗?我敢肯定它实际上并没有反转,但数学正在造成意想不到的视觉效果

.path{
行程数组:10;
行程偏移:10 30;
动画:直线无限;
}
@关键帧破折号{
50%{
行程偏移:35%;
行程:087.5%;
}
}

根据

如果关键帧规则未指定动画的开始或结束状态(即0%/from和100%/to),浏览器将使用元素的现有样式作为开始/结束状态。这可用于从元素的初始状态开始并向后设置元素的动画


你有一个50%的关键帧,因此动画在中场时转到该关键帧,然后在全场时回到初始状态。

[手掌和脸部在雷鸣般的掌声中相遇]。真的很尴尬,我早该知道的。非常感谢。