Question

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

我需要穿过黄线的小盒子。请看下面的演示，你会得到我正在寻找的东西。

DEMO

http://jsfiddle.net/w9aX6/

Answer 1

我知道这个答案已经得到了回答，但我找到了一个很好的例子，这需要更少的帧，因此性能更好。

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

您期望这个基本的HTML结构：

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

我使用center tricks of css-tricks将“手”中心放置在时钟元素的左中间。

我们只是使用transform: rotateZ为动画制作动画。

Here an example

您可以对时钟进行变换，使其呈现出在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;。

jsFiddle

我做了一个轻微的其他例子，其中我使用了全宽度和高度而不是笔画：

jsFiddle

我使路径盒半透明，以便您可以看到形状和实际运动

来源：How to make an atom like animation using CSS3 animations?

Answer 2

你可能正在寻找这个：

@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;
}

这是LAST TEST

这是JSFiddle Test one

这是JSFiddle for test two

Answer 3

这是没有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);}
}

http://jsfiddle.net/mT8Rr/

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

任何参赛者？

CSS3动画通过绘图笔划路径

3 个答案:

Here an example

jsFiddle

jsFiddle