Jquery CSS3通过绘制笔划路径的动画

如果有人知道如何通过使用css3绘制笔划路径来设置元素动画，请帮助我

我需要穿过黄线的小盒子。请看下面的演示，你会得到我想要的

DEMO

http://jsfiddle.net/w9aX6/

---

可能是您在找这个：

@keyframes front {
    0%  {  margin-top:180px;    margin-left:140px;  }
    3%  {   margin-top:190px;  margin-left:160px; width:32px; height:32px;  }
    6%  {   margin-top:198px;  margin-left:190px; width:34px; height:34px;  }
    9%  {   margin-top:202px;  margin-left:220px; width:36px; height:36px;  }
    12% {   margin-top:204px;  margin-left:250px; width:38px; height:38px;  }
    15% {   margin-top:205px;  margin-left:280px; width:40px; height:40px;  }
    18% {  margin-top:205px;    margin-left:310px;  }
    21% {  margin-top:204px;    margin-left:340px;  }
    24% {  margin-top:204px;    margin-left:370px;  }
    27% {  margin-top:203px;    margin-left:400px;  }
    30% {  margin-top:203px;    margin-left:400px;  }
    33% {  margin-top:201px;    margin-left:430px;  }
    36% {  margin-top:199px;    margin-left:460px;  }
    39% {  margin-top:197px;    margin-left:490px;  }
    42% {  margin-top:192px;    margin-left:520px;  }
    45% {  margin-top:187px;    margin-left:550px;  }
    48% {  margin-top:182px;    margin-left:580px; width:40px; height:40px;  }
    51% {  margin-top:175px;    margin-left:610px; width:38px; height:38px;  }
    54% {  margin-top:164px;    margin-left:630px; width:36px; height:36px;  }
    57% {  margin-top:160px;    margin-left:640px; width:34px; height:34px;  }
    60% {  margin-top:143px;    margin-left:610px; width:32px; height:32px;  }
    63% {  margin-top:138px;    margin-left:580px;  }
    66% {  margin-top:133px;    margin-left:550px;  }
    69% {  margin-top:132px;    margin-left:520px; width:29px; height:29px;  }
    72% {  margin-top:131px;    margin-left:490px; width:28px; height:28px;  }
    75% {  margin-top:130px;    margin-left:460px; width:27px; height:27px;  }
    78% {  margin-top:131px;    margin-left:430px;  }
    81% {  margin-top:132px;    margin-left:400px;  }
    84% {  margin-top:134px;    margin-left:370px;  }
    87% {  margin-top:136px;    margin-left:340px;  }
    90% {  margin-top:138px;    margin-left:310px;  }
    93% {  margin-top:140px;    margin-left:280px;  }
    96% {  margin-top:142px;    margin-left:250px;  }
    100% {  margin-top:149px;   margin-left:200px;  }   
}

@-webkit-keyframes front {
    0%  {  margin-top:180px;    margin-left:140px;  }
    3%  {   margin-top:190px;  margin-left:160px; width:32px; height:32px;  }
    6%  {   margin-top:198px;  margin-left:190px; width:34px; height:34px;  }
    9%  {   margin-top:202px;  margin-left:220px; width:36px; height:36px;  }
    12% {   margin-top:204px;  margin-left:250px; width:38px; height:38px;  }
    15% {   margin-top:205px;  margin-left:280px; width:40px; height:40px;  }
    18% {  margin-top:205px;    margin-left:310px;  }
    21% {  margin-top:204px;    margin-left:340px;  }
    24% {  margin-top:204px;    margin-left:370px;  }
    27% {  margin-top:203px;    margin-left:400px;  }
    30% {  margin-top:203px;    margin-left:400px;  }
    33% {  margin-top:201px;    margin-left:430px;  }
    36% {  margin-top:199px;    margin-left:460px;  }
    39% {  margin-top:197px;    margin-left:490px;  }
    42% {  margin-top:192px;    margin-left:520px;  }
    45% {  margin-top:187px;    margin-left:550px;  }
    48% {  margin-top:182px;    margin-left:580px; width:40px; height:40px;  }
    51% {  margin-top:175px;    margin-left:610px; width:38px; height:38px;  }
    54% {  margin-top:164px;    margin-left:630px; width:36px; height:36px;  }
    57% {  margin-top:160px;    margin-left:640px; width:34px; height:34px;  }
    60% {  margin-top:143px;    margin-left:610px; width:32px; height:32px;  }
    63% {  margin-top:138px;    margin-left:580px;  }
    66% {  margin-top:133px;    margin-left:550px;  }
    69% {  margin-top:132px;    margin-left:520px; width:29px; height:29px;  }
    72% {  margin-top:131px;    margin-left:490px; width:28px; height:28px;  }
    75% {  margin-top:130px;    margin-left:460px; width:27px; height:27px;  }
    78% {  margin-top:131px;    margin-left:430px;  }
    81% {  margin-top:132px;    margin-left:400px;  }
    84% {  margin-top:134px;    margin-left:370px;  }
    87% {  margin-top:136px;    margin-left:340px;  }
    90% {  margin-top:138px;    margin-left:310px;  }
    93% {  margin-top:140px;    margin-left:280px;  }
    96% {  margin-top:142px;    margin-left:250px;  }
    100% {  margin-top:149px;   margin-left:200px;  }   
}

body
{
    background:#590f00;
}
.box
{
    width:800px;
    height:434px;
    border-radius:13px;
    background:#741400;
    margin:55px auto;
    border:1px dashed #460c00;
    position:relative;
}
.spider
{
    width:30px;
    height:30px;
    position:absolute;
    margin-top:180px;
    margin-left:140px;
    background:#000;
    z-index:5;
        animation: front 8s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        -webkit-animation: front 8s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;

}

#wave {
  position: absolute;
  height: 2px;
  width: 600px;

}

#wave:before {
        content: "";
        display: block;
        position: absolute;
        border-radius: 100% 50%;
        width: 500px;
    height: 80px;
    right: -50px;
    top: 140px;
        border:3px solid #ffd800;

}

#wave:after {
        content: "";
        display: block;
        position: absolute;
        border-radius: 100% 50%;
        width: 300px;
    height: 70px;
    left: 0;
    top: 27px;
}

这是

这是

---

这是

我知道这个答案已经得到了回答，但我发现了一个很好的例子，它需要更少的帧，所以性能更好

---

创建时钟时，您想要创建的核心结构实际上是相同的（几乎相同）

您期望的基本HTML结构是：

<div id="clock">
    <div id="hand">
        <div id="topHand"></div>
    </div>    
</div>

不要忘记使用

-webkit变换样式：preserve-3d当使用此选项时


我举了另一个例子，我使用了全宽和全高，而不是笔划：

我将路径框设置为半透明，以便您可以看到形状和实际运动

来源：
这是你的答案，没有3d甚至2d变换

关键是分别移动x和y，每一个都有不同的放松，这是屏幕上运动错觉的基础。就像一块蚀刻草图板

@-webkit-keyframes circle_x {
    0%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    25%{ left: 486px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    50%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    75%{ left: 186px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    100%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
}
@-webkit-keyframes circle_y {
    0%{ top: 0px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    25%{ top: 150px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    50%{ top: 300px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    75%{ top: 150px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    100%{ top: 0px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
}


该示例显示了一个圆周运动，但您可以沿着任何路径运行，只要手动输入每帧中每对节点的贝塞尔坐标，或者某个天才最终接受了为该运动提供在线贝塞尔创建者的挑战

有人吗？
请阅读此文，谢谢您的回复。。我知道如何为动画设置关键帧，正如您现在向我展示的那样。但我的问题不同。我更新了我的问题进一步解释。你对css很在行，但我正在寻找笔划路径的黑匣子旋转。我的意思是长方体将基于该路径旋转。谢谢你，我想因为我的英语，我没有把你的意思说对；我会努力修改并编辑我的答案……Thnk你就是我所期望的……！）谢谢你，这对我来说是一首很好的芭蕾舞曲。@VahidRockv很高兴我能分享这首：）
@-webkit-keyframes circle_x {
    0%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    25%{ left: 486px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    50%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    75%{ left: 186px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    100%{ left: 336px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
}
@-webkit-keyframes circle_y {
    0%{ top: 0px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    25%{ top: 150px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    50%{ top: 300px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
    75%{ top: 150px; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.54, 1.0);}
    100%{ top: 0px; -webkit-animation-timing-function: cubic-bezier(0.46, 0, 1.0, 1.0);}
}