2

If anyone knows how to animate an element through drawing stroke path using css3 please help me.

I need the little box that runs through the yellow line. Please see the demo below, you'll get what I'm looking for.

DEMO

http://jsfiddle.net/w9aX6/
VahidRockv
  • 80
  • 10

3 Answers3

1

I know this answer is already answered but i found a great example of this, which requires less frames so better performance.

The core structure you want to create is actually the same(almost) when you create a clock.

Where you expect this basic HTML structure:

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

I used the center tricks of css-tricks to center the "hand" excacly in the left middle of the clock element.

Where we just animate the hand around with the transform: rotateZ.

Here an example

You can transform the clock so it gives the illusion it has been rotated in 3D, thus looks like a oval. You can do this with the -webkit-transform: rotateX() rotateY(); Note that this defines your oval form

Now we need to get rid of the illusion it is 3D.

You just negetate the rotate properties on your box:

@-webkit-keyframes rotateFix {
    from {
        -webkit-transform: rotateX(90deg) rotateY(0deg);
    }
    to {
        -webkit-transform: rotateX(90deg) rotateY(-360deg);
    }
}

Do not forget to use -webkit-transform-style: preserve-3d; when using this.

jsFiddle

An slighty other example i made, where i used the full width and height instead of a stroke:

jsFiddle

I made the path-box semi-transparent so you can see the shape and the actual movement

source: How to make an atom like animation using CSS3 animations?

Community
  • 1
  • 1
nkmol
  • 8,025
  • 3
  • 30
  • 51
0

may be you are looking for this:

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

This is the LAST TEST

and this is JSFiddle Test one

This is JSFiddle for test two

Kiyarash
  • 2,437
  • 7
  • 32
  • 61
  • Thanks for your reply is that .. I know how to keyframe animation as you showed to me now. But my problem is different. I had updated my question further explanation. – VahidRockv Dec 05 '13 at 10:15
  • You are great with css, but I am looking black box rotation through out the stroke path. I mean box will rotate based on that path. Thanks – VahidRockv Dec 06 '13 at 04:21
  • It's kind of you, I think because of my English I didn't get your mean correct; I'll work on it and edit my answer.... – Kiyarash Dec 06 '13 at 05:56
  • Thnk you is this what i expected..! :) – VahidRockv Dec 06 '13 at 09:40
0

This is your answer without 3d or even 2d transformations.

The key is to move the x and y separately, each with a different easing, which is the fundament of the movement illusion on screen. Like an etch-a-sketch board.

@-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/

The example shows a circular motion, but you could run along any path, given manually enter the bezier coordinates for each pair of nodes in each frame, or some genius finally takes the challenge of providing an online bezier creator for this.

Any takers?

sergio
  • 997
  • 1
  • 11
  • 15