Css 动画SVG错误方向
我试图用我制作的svg来制作一个单词的动画。单词本身写的方向不对(从单词的末尾开始,从开头结束)。我可以控制动画的方向吗Css 动画SVG错误方向,css,svg,css-animations,Css,Svg,Css Animations,我试图用我制作的svg来制作一个单词的动画。单词本身写的方向不对(从单词的末尾开始,从开头结束)。我可以控制动画的方向吗 @关键帧偏移{ 100%{ 笔划偏移:0; } } .motEpicerie{笔划:#000;笔划宽度:3px; 笔划阵列:984; 行程偏移量:984; 动画:偏移4s线性向前; } 只需将行程dashoffset反转为负值即可 当然,最明显的解决方案是简单地按照正确的方向重新写入路径。预先计划就是一切。:) @关键帧偏移{ 100% { 笔划偏移:0; } } .汽车
@关键帧偏移{
100%{
笔划偏移:0;
}
}
.motEpicerie{笔划:#000;笔划宽度:3px;
笔划阵列:984;
行程偏移量:984;
动画:偏移4s线性向前;
}
只需将
行程dashoffset
反转为负值即可
当然,最明显的解决方案是简单地按照正确的方向重新写入路径。预先计划就是一切。:)
@关键帧偏移{
100% {
笔划偏移:0;
}
}
.汽车旅馆{
行程:#000;
笔画宽度:3px;
笔划阵列:984;
行程偏移:-984;
动画:偏移4s线性向前;
}
您必须颠倒路径上各点的顺序 您的路径非常复杂,有很多点,因此可能很难区分这些点并重新排序 不过,这里有一个简单的例子对我很有用。(仅更改多段线点的顺序) 旧路径/代码:
.st2{填充:无;笔划:#2D3E99;笔划宽度:13;笔划线帽:圆形;笔划线连接:圆形;笔划斜接限制:10;}
g{
笔划阵列:1000;
行程偏移量:1000;
动画:向前冲5秒;
}
@关键帧破折号{
到{
笔划偏移:0;
}
}
.motEpicerie {
stroke: #000;
stroke-width: 3px;
stroke-dasharray: 984;
stroke-dashoffset: -984;
animation: offset 4s linear forwards;
}