$(document).ready(function() {
// FIRST CIRCLE
$(".circle-1").animate({left: '0%', top: '0%'}, 5000);
$(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000);
$(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000);
$(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000);
$(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000);
// SECOND CIRCLE
$(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000);
$(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000);
$(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000);
$(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000);
$(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000);
// THIRD CIRCLE
$(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000);
$(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000);
$(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000);
$(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000);
$(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000);
});
html{
width:100%;
height:100%
}
body{
width:100%;
height:100%;
overflow: hidden
}
.page{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
/*background-image: url('../images/grid.svg');*/
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #0099ff; /* Old browsers */
background-color: -moz-linear-gradient(top, #0099ff 0%, #085c8b 100%); /* FF3.6-15 */
background-color: -webkit-linear-gradient(top, #0099ff 0%,#085c8b 100%); /* Chrome10-25,Safari5.1-6 */
background-color: linear-gradient(to bottom, #0099ff 0%,#085c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099ff', endColorstr='#085c8b',GradientType=0); /* IE6-9 */
}
.page .logo{
width: 257px;
height: 54px;
background-image: url(../images/logo.svg);
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
top: 40px;
left: 120px;
}
.content{
color: white;
position: relative;
width: 100%;
text-align: center;
}
.content .title{
font-weight: 100;
font-size: 72px;
}
.content .sub-title{
font-size: 28px;
}
.page .lines{
width: 100%;
height: 100%;
z-index: 1;
}
.page .anim-elem{
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
}
.page .anim-elem .circle{
display: flex;
align-items: center;
position: absolute;
background: rgba(255, 255, 255, 0.25);
width: 32px;
height: 32px;
border-radius: 100%;
/* transform: translate(-32px);*/
margin: -16px -16px
}
.page .anim-elem .circle:after{
content: '';
background: white;
content: '';
background: white;
width: 14px;
height: 14px;
border-radius: 100%;
position: absolute;
margin: 8px 8px;
left: 0;
right: 0;
}
.page .anim-elem .circle.circle-1{
top: 100%;
left: 50%;
border-radius: 0% !important;
margin:0 !important;
}
.page .anim-elem .circle.circle-2{
top: 100%;
left: 0%;
}
.page .anim-elem .circle.circle-3{
top: 100%;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="lines">
<svg height="100%" width="100%">
<!-- TOP LEFT -->
<line x1="0" y1="0" x2="100%" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="0" y1="0" x2="25%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="0" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="0" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<!-- TOP RIGHT -->
<line x1="100%" y1="0" x2="0" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="100%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="50%" y1="100%" x2="100%" y2="0" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="75%" y1="100%" x2="100%" y2="0" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<!-- TOP FIRST -->
<line x1="25%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="25%" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<!-- TOP SECOND -->
<line x1="50%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="50%" y1="0" x2="25%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="50%" y1="0" x2="75%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="50%" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<!-- TOP THIRD -->
<line x1="75%" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="75%" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<!-- BOTTOM LINES -->
<line x1="0" y1="100%" x2="100%" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
<line x1="100%" y1="100%" x2="0" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
</svg>
</div>
<div class="anim-elem">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</div>
。円の中心点の左ではありません。あなたは円の幅を考慮する必要があります。例えば。円の中心は「左」+「幅/ 2」である。特定のパスに沿ってオブジェクトをアニメートするために使用できるSVG ' 'を使うことを強くお勧めします。 [https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion） –