使用CSS3对沿路径飞行的对象进行无限动画

早上好，我们的任务是制作飞机绕路径飞行的动画。我决定利用CSS3中的机会。但我所取得的只是一个动画周期。飞机绕路径飞行一圈，动画停止。我尝试使用

动画迭代计数

和

无限

，但我得到的只是飞机在混乱方向上的飞行。下面是我的代码，请告诉我如何循环这个动画，使飞机不停地在一个圆圈里飞行

代码

.wrap{
利润率：100像素；
}
.路线{
高度：200px；
宽度：400px；
边框：3个点#000；
位置：相对位置；
}
.飞机{
位置：绝对位置；
底部：-13px；
左：100%；
动画迭代次数：3次；
动画：左飞1.5s直线前进，旋转平面0.5s直线前进1.5s，上飞1s直线前进2s，右飞0.5s直线前进2.8s，右飞3s直线前进3s，下飞1s直线前进6s，下飞1s直线前进7s，旋转1s直线前进7.8s；
}
@左飞关键帧{
100% {
左-14px；
}
}
@关键帧旋转平面{
100% {
变换：旋转（90度）；
}
}
@关键帧弹出{
100% {
底部：100%；
}
}
@关键帧旋转右{
0% {
变换：旋转（90度）；
}
100% {
变换：旋转（180度）；
}
}
@关键帧向右移动{
0% {
左-14px；
}
100% {
左：380px；
}
}
@关键帧向下旋转{
0% {
变换：旋转（180度）；
}
100% {
变换：旋转（270度）；
}
}
@关键帧向下飞行{
0% {
底部：100%；
}
100% {
底部-8%；
}
}
@旋转的关键帧{
0% {
变换：旋转（270度）；
}
100% {
变换：旋转（360度）；
}
}

---

您需要将所有动画包装在一个

@关键帧中

CSS at规则中，以便轻松进行重复。下面是一个可行的解决方案，它将所有动画封装在一个

@关键帧中


.wrap{
利润率：100像素；
}
.路线{
高度：200px；
宽度：400px；
边框：3个点#000；
位置：相对位置；
}
.飞机{
位置：绝对位置；
右：0；
底部：0；
转换：翻译（50%，50%）；
动画：环绕边界旅行10秒线性无限；
}
@关键帧绕边界移动{
30% {
底部：0；
右：100%；
转换：翻译（50%，50%）；
}
32.5% {
底部：0；
右：100%；
变换：平移（50%，50%）旋转（90度）；
}
47.5% {
右：100%；
底部：100%；
变换：平移（50%，50%）旋转（90度）；
}
50% {
右：100%；
底部：100%；
变换：平移（50%，50%）旋转（180度）；
}
80% {
右：0；
底部：100%；
变换：平移（50%，50%）旋转（180度）；
}
82.5% {
右：0；
底部：100%；
变换：平移（50%，50%）旋转（270度）；
}
97.5% {
右：0；
底部：0；
变换：平移（50%，50%）旋转（270度）；
}
100% {
右：0；
底部：0；
变换：平移（50%，50%）旋转（360度）；
}
}
将沿路径和转弯处的运动拆分为两个独立的关键帧使此过程更容易

百分比的数学计算基于一个正方形，但使用矩形时百分比会发生变化

CSS变量可以帮助计算出这些百分比，但为了演示的目的，我没有深入讨论


.wrap{
利润率：10px；
}
.路线{
高度：150像素；
宽度：150px；
保证金：自动；
边框：3个点#000；
位置：相对位置；
}
.飞机{
位置：绝对位置；
变换：平移（-50%，-50%）旋转（180度）；
排名：0；
左：0；
动画：路径6s线性无限，转弯6s轻松无限；
}
@关键帧路径{
0%,
100% {
左：0；
排名：0；
}
25% {
左：100%；
排名：0；
}
50% {
左：100%；
最高：100%；
}
75% {
左：0；
最高：100%；
}
}
@关键帧旋转{
0%,
24% {
变换：平移（-50%，-50%）旋转（180度）；
}
25%,
49% {
变换：平移（-50%，-50%）旋转（270度）；
}
50%,
74% {
变换：平移（-50%，-50%）旋转（0度）；
}
75%,
99% {
变换：平移（-50%，-50%）旋转（90度）；
}
100% {
变换：平移（-50%，-50%）旋转（90度）；
}
}
刚刚开始测试新的CSS可能性，偏移路径（IE不支持，FF实验性）



#容器{
宽度：400px；
高度：300px；
边框：点黑色5px；
利润率：30像素；
}
#动作演示{
偏移路径：路径（'M0-10 H400 A 10 1 0 1 410 0 V300 A 10 1 0 1 400 310 H0 A 10 10 1 0 1-10 300 V0'）；
动画：移动10秒无限线性；
宽度：40px；
高度：40px；
背景：青色；
}
@关键帧移动{
0% {
偏移距离：0%；
}
100% {
偏移距离：100%；
}
}

A.
您的代码不是一个“圆”…我想您的意思是希望动画围绕边框循环。我建议您将这些动画组合成一组关键帧，除非您计划重用它们。确实如此。你不能在一系列关键帧动画上使用“无限”是的，这是我的错误，我的意思是路径，而不是圆。路径总是一个矩形框吗？是的，但转弯时不是很平滑。@Paulie\u你只需要调整转弯的计时函数（百分比）。你想轮到多长时间（毫秒）？非常感谢，css3动画对我来说是一个新领域，我会花很多时间来解决这个问题。多亏了你，我理解并可以用它来解决css3动画中的其他典型任务。@Paulie_D我已将它调整为每转0.25秒。@VictorSokoliuk当然，我已将它调整为更快。一定要尝试在关键帧中使用百分比和值，看看它们是如何工作的。谢谢大家的帮助。那很酷。事实上，我试图决定哪一天