CSS动画一个方向，翻转然后向后动画

Question

我试图使帆船从左到右水平进行动画，然后将船翻转并从右到左，然后循环。

。

我有正确的左路。不确定如何处理翻转和右至左侧部分。

.sailBoatContainer {
    position: absolute;
    width: 250px;
    animation: move 20s linear infinite;
}
@keyframes move {
    from {
        left: 0;
    }
    to {
        left: 100%;
    }
}
    <div id="sail" class="sailBoatContainer">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 103.18">
        <defs>  
            <style>.sail1,.sail5{fill:none;}.sail1{stroke:#e1e1e1;}.sail1,.sail5,.sail6{stroke-linecap:round;}.sail1,.sail6{stroke-linejoin:round;}.sail2,.sail6{fill:#d3dfdd;}.sail3{fill:#f4f4f4;}.sail4{fill:#f1263a;}.sail5{stroke:#ae8863;stroke-miterlimit:10;stroke-width:2px;}.sail6{stroke:#c2ccca;}.sail7{fill:#7f604c;}
            </style>
        </defs>
        <title>sailboat</title>
        <g id="rigging">
            <path id="roperight" class="sail1" d="M1.48,89s37-35.67,50-70.33" transform="translate(-0.48 0)"/>
            <path id="ropeleft" class="sail1" d="M51.48,20.33c16,37.34,46,62.67,46,62.67" transform="translate(-0.48 0)"/>
        </g>
        <g id="cabin">
            <path id="cabinbox" class="sail2" d="M51.48,82v8h27V87s-9-5-12-5ZM62,83.5h4v4H62Zm-6,1h3v3H56Z" transform="translate(-0.48 0)"/>
        </g>
        <g id="sails">
            <path id="sailright" class="sail3" d="M86.48,72s-23-43-33-49c0-1,11,24-4,46C49.48,69,75.48,68,86.48,72Z" transform="translate(-0.48 0)"/>
            <path id="sailleft" class="sail3" d="M48.48,14s-49,35-34,66c0,1,35,0,35,0S44.48,38,48.48,14Z" transform="translate(-0.48 0)"/>
        </g>
        <g id="flag">
            <path class="sail4" d="M52,1.5s-2,2-3,2-8-2-11,0c0,0,6,1,8,4h6Z" transform="translate(-0.48 0)"/>
        </g>
        <g id="mast">
            <line id="mastline" class="sail5" x1="51" y1="88" x2="51" y2="1"/>
        </g>
        <g id="hull">
            <path id="hullbox" class="sail6" d="M90,101.5s-78,4-89-4v-9s79,2,97-6C97,83.5,99,90.5,90,101.5Z" transform="translate(-0.48 0)"/>
        </g>
        <g id="hullbottom">
            <path id="hullbottombox" class="sail7" d="M91.87,99.88S21.5,104,.5,97v2s8.73,6.94,89.73,2.94Z" transform="translate(-0.48 0)"/>
        </g>
    </svg>
</div>

这是Codpen

如果有人可以将我指向正确的方向。

Answer 1

不确定如何处理翻转和右至左侧部分。

首先从两个"步骤"移动到三个"步骤"，0％/50％/100％而不是/到/到。以50％的速度向右移动，然后以100％的速度返回0。

（ left: calc(100% - 250px);到达右窗口边缘时，它有助于使其转弯，而不是沿着船的宽度并引起滚动栏； - ）

）

然后扔一些transform:scaleX，以从50％上"镜像"。

但这实际上需要插入第四步 - 否则scalex将将慢慢地从-1慢慢转换为1，而他的船将最终变成"旋转" ...因此，要将其保持在-1之前，直到我们达到50％，请将框架扔进49.999％：

：

@keyframes move
{
    0% {
        left: 0;
      transform: scaleX(1);
    }
    49.999% {
      transform: scaleX(1);
    }
    50% {
      left: calc(100% - 250px);
      transform: scaleX(-1);
    }
    100% {
      left: 0%;
      transform: scaleX(-1);
    }
}

https://codepen.io/anon/pen/zagbxn

Answer 2

您可以在Animation

中使用类似的键框

@keyframes move
{
  0%   {
    left: 0;
  }
    50%   {
    left: 100%;
  }
    100%   {
    left: 0%;
  }
}