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

你可以在动画中使用这样的关键帧

onListenerConnected()

Answer 2

不确定如何处理翻页和从右到左的部分。

首先从两个转到三个＆＃34;步骤＆＃34;，0％/ 50％/ 100％而不是从/到。一直向右移动50％，然后以100％回到0。

（left: calc(100% - 250px);有助于它在到达正确的窗口边缘时转身，而不是超过船的宽度并导致滚动条; - ）

然后将一些transform:scaleX投入＆＃34;镜像＆＃34;它也是50％。

但实际上这需要插入第四步 - 否则scaleX将慢慢地将从-1转换为1，并且他的船将结束＆＃34;旋转＆＃34; ...所以要保持在-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

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

2 个答案: