object 的无限 animation 使用 CSS3 飞行路径

Question

美好的一天，任务是制作绕路径飞行的飞机的 animation。 我决定利用 CSS3 中的机会。 但我所取得的只是一个 animation 循环。 飞机绕路径飞行一圈，animation 停止。 我尝试使用带有infinite animation-iteration-count ，但我得到的只是飞机在混乱方向上的飞行。 下面是我的代码，请告诉我如何循环这个 animation 以便飞机不停地绕圈飞行。

代码

 .wrap { margin: 100px; }.route { height: 200px; width: 400px; border: 3px dotted #000; position: relative; }.plane { position: absolute; bottom: -13px; left: 100%; animation-iteration-count: 3; animation: flyLeft 1.5s linear forwards, rotatePlane 0.5s linear 1.5s forwards, flyUp 1s linear forwards 2s, RotateRight 0.5s linear 2.8s forwards, MoveRight 3s linear forwards 3s, RotateDown 1s linear 6s forwards, flyDown 1s linear forwards 7s, RotateLeft 1s linear 7.8s forwards; } @keyframes flyLeft { 100% { left: -14px; } } @keyframes rotatePlane { 100% { transform: rotateZ(90deg); } } @keyframes flyUp { 100% { bottom: 100%; } } @keyframes RotateRight { 0% { transform: rotateZ(90deg); } 100% { transform: rotateZ(180deg); } } @keyframes MoveRight { 0% { left: -14px; } 100% { left: 380px; } } @keyframes RotateDown { 0% { transform: rotateZ(180deg); } 100% { transform: rotateZ(270deg); } } @keyframes flyDown { 0% { bottom: 100%; } 100% { bottom: -8%; } } @keyframes RotateLeft { 0% { transform: rotateZ(270deg); } 100% { transform: rotateZ(360deg); } }

 <div class="wrap"> <div class="route"> <img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png"> </div> </div>

Answer 1

您需要将所有动画包装在一个@keyframes CSS 规则中，以便轻松进行重复。 下面是一个有效的解决方案，它将所有动画包装在一个@keyframes中。

 .wrap { margin: 100px; }.route { height: 200px; width: 400px; border: 3px dotted #000; position: relative; }.plane { position: absolute; right: 0; bottom: 0; transform: translate(50%, 50%); animation: travelRoundTheBorder 10s linear infinite; } @keyframes travelRoundTheBorder { 30% { bottom: 0; right: 100%; transform: translate(50%, 50%); } 32.5% { bottom: 0; right: 100%; transform: translate(50%, 50%) rotate(90deg); } 47.5% { right: 100%; bottom: 100%; transform: translate(50%, 50%) rotate(90deg); } 50% { right: 100%; bottom: 100%; transform: translate(50%, 50%) rotate(180deg); } 80% { right: 0; bottom: 100%; transform: translate(50%, 50%) rotate(180deg); } 82.5% { right: 0; bottom: 100%; transform: translate(50%, 50%) rotate(270deg); } 97.5% { right: 0; bottom: 0; transform: translate(50%, 50%) rotate(270deg); } 100% { right: 0; bottom: 0; transform: translate(50%, 50%) rotate(360deg); } }

 <div class="wrap"> <div class="route"> <img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png"> </div> </div>

Answer 2

将沿路径的运动和转弯拆分为两个单独的关键帧使这更容易。

百分比的数学是基于正方形，但对于矩形，百分比会发生变化。

CSS 变量可以帮助计算出这些百分比，但出于演示目的，我没有深入研究。

 .wrap { margin: 10px; }.route { height: 150px; width: 150px; margin: auto; border: 3px dotted #000; position: relative; }.plane { position: absolute; transform: translate(-50%, -50%) rotate(180deg); top: 0; left: 0; animation: path 6s linear infinite, turn 6s ease infinite; } @keyframes path { 0%, 100% { left: 0; top: 0; } 25% { left: 100%; top: 0; } 50% { left: 100%; top: 100%; } 75% { left: 0; top: 100%; } } @keyframes turn { 0%, 24% { transform: translate(-50%, -50%) rotate(180deg); } 25%, 49% { transform: translate(-50%, -50%) rotate(270deg); } 50%, 74% { transform: translate(-50%, -50%) rotate(0deg); } 75%, 99% { transform: translate(-50%, -50%) rotate(90deg); } 100% { transform: translate(-50%, -50%) rotate(90deg); } }

 <div class="wrap"> <div class="route"> <img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png"> </div> </div>

Answer 3

刚开始测试新的 CSS 可能性，偏移路径（IE 不支持，FF 实验）

参考

 #container { width: 400px; height: 300px; border: dotted 5px black; margin: 30px; } #motion-demo { offset-path: path('M0 -10 H400 A 10 10 1 0 1 410 0 V300 A 10 10 1 0 1 400 310 H0 A 10 10 1 0 1 -10 300 V0'); animation: move 10s infinite linear; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

 <div id="container"> <div id="motion-demo">A</div> </div>