Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>may be you are looking for this:<br></p> <pre><code>@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; } </code></pre> <p>This is the <a href="http://jsfiddle.net/Quw39/" rel="nofollow">LAST TEST</a></p> <p>and this is <a href="http://jsfiddle.net/jKetY/" rel="nofollow">JSFiddle Test one</a></p> <p>This is <a href="http://jsfiddle.net/FqHUF/" rel="nofollow">JSFiddle for test two</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload