CSS3 Translate:翻译Ellipse路径上的元素

Question

我一直在寻找答案,但我能看到的只是在圆形路径中翻译一个物体.在给定半短轴和半长轴的情况下,有没有办法在椭圆路径上平移元素？非常感谢!

下面的答案回答

css3

Answer 1

看看这个页面,它解释了你应该了解的关于CSS3翻译的所有知识.正如提醒一样:​​也可以设置关键帧,用于定义要设置动画的样条曲线的边缘点.

关键帧在这里解释.

在您的情况下,它是两个嵌套元素的动画.
#1为您要设置动画的图片或元素,您可以轻松定义X转换
#2,另一个作为#1的外框,您可以设置Y转换的动画.
如果你把它们巧妙地安排在相同的时间尺度但不同的容易进出,你可以让你的椭圆发生.

<style>
    .viewport {
        position:relative;
        width:640px;
        height:480px;
        border:1px dashed #000;
    }
    .moveX {
      position:absolute;
      background:#f00;
      height:2px;
      width:480px;
      top:240px;
      left:0px;
      -webkit-animation: mX 5s ease-in-out 0s infinite;
       animation: mX 5s ease-in-out 0s infinite;
    }
    .moveY {
        position:absolute;
        width:480px;
        height:100px; top:-50px;
        border:1px solid #333;
        -webkit-animation: mO 5s linear 0s infinite;
        animation: mO 5s linear 0s infinite;
    }
    .elipsoid {  
      position:absolute;
      background:url('http://placehold.it/100/00f/fff/&text=>°))><');
      top: 0px;
      left: 0px;
      width: 100px;
      height: 100px;
      border-radius:50%;
    }
    @keyframes mO {
        0% { transform: rotate(0deg);   }
      100% { transform: rotate(360deg); }
    }
    @-webkit-keyframes mO {
        0% { -webkit-transform: rotate(0deg);   }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes mX {
        0% { transform: translateX(0px);   }
       50% { transform: translateX(160px); }
      100% { transform: translateX(0px);   }
    }
    @-webkit-keyframes mX {
        0% { -webkit-transform: translateX(0px)    }
       50% { -webkit-transform: translateX(160px); }
      100% { -webkit-transform: translateX(0px)    }
    }
</style>
<div class="viewport">
    <span class="moveX">
       <div class="moveY"><span class="elipsoid"></span></div>
    </span>
</div>