如果有人知道如何通过使用css3绘制描边路径来为元素设置动画，请帮助我。
我需要穿过黄线的小盒子。请看下面的演示，你会得到我正在寻找的东西。
DEMO
http://jsfiddle.net/w9aX6/
答案 0 :(得分：1)
我知道这个答案已经得到了回答，但我找到了一个很好的例子，这需要更少的帧，因此性能更好。
创建时钟时，您想要创建的核心结构实际上是相同的（几乎）。
您期望这个基本的HTML结构：
<div id="clock">
<div id="hand">
<div id="topHand"></div>
</div>
</div>
我使用center tricks of css-tricks将“手”中心放置在时钟元素的左中间。
我们只是使用transform: rotateZ为动画制作动画。
您可以对时钟进行变换，使其呈现出在3D中旋转的幻觉，因此看起来像一个椭圆形。
您可以使用-webkit-transform: rotateX() rotateY();执行此操作
请注意，这会定义您的椭圆形
现在我们需要摆脱它是3D的错觉。
您只需在框中找到rotate属性：
@-webkit-keyframes rotateFix {
from {
-webkit-transform: rotateX(90deg) rotateY(0deg);
}
to {
-webkit-transform: rotateX(90deg) rotateY(-360deg);
}
}
使用时请不要忘记使用-webkit-transform-style: preserve-3d;。
我做了一个轻微的其他例子，其中我使用了全宽度和高度而不是笔画：
我使路径盒半透明，以便您可以看到形状和实际运动
来源：How to make an atom like animation using CSS3 animations?
答案 1 :(得分：0)
@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;
}
答案 2 :(得分：0)
这是没有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);}
}
该示例显示了一个圆周运动，但您可以沿任何路径运行，手动输入每帧中每对节点的贝塞尔坐标，或者某些天才最终接受为此提供在线贝塞尔创建者的挑战。 / p>
任何参赛者？