Как мне сделать такую анимацию?
У меня получилось пока вот так:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: royalblue;
}
.block {
width: 800px;
height: 400px;
margin: 200px auto 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
-webkit-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
}
.centerBlock {
width: 410px;
height: 110px;
border-radius: 100px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to right, white, grey, grey, black, black);
z-index: 10;
}
.back {
width: 400px;
height: 100px;
border-radius: 100px;
background-image: linear-gradient(to right, white, grey, black, black);
z-index: 15;
}
.bl {
position: absolute;
width: 110px;
height: 110px;
}
.left {
transform: translateY(-5px) translateX(-5px);
background-color: black;
border: 5px solid white;
border-radius: 50%;
z-index: 2;
}
.right {
transform: translateX(155px);
background-color: black;
z-index: 2;
width: 110px;
height: 110px;
border-radius: 110px;
border: 5px solid black;
border-left: 5px solid white;
animation: rotate 5s infinite linear;
}
.lineTop {
position: absolute;
height: 5px;
width: 100px;
transform: translateY(-52.5px) translateX(-100px);
background-color: white;
z-index: 10;
border-radius: 25px;
animation: anim_top 5s infinite linear;
}
.lineBottom {
position: absolute;
height: 5px;
width: 0;
transform: translateY(52px) translateX(150px);
background-color: white;
z-index: 10;
border-radius: 25px;
animation: anim_bot 5s infinite linear;
}
@keyframes rotate {
0%,
30% {
transform: translateX(155px);
}
55%,
100% {
transform: translateX(155px) rotate(360deg);
}
}
@keyframes anim_top {
0% {
transform: translateY(-52px) translateX(-100px);
}
35% {
transform: translateY(-52px) translateX(120px);
width: 100px;
}
45%,
100% {
transform: translateY(-52px) translateX(155px);
width: 0;
}
}
@keyframes anim_bot {
45% {
width: 0;
transform: translateY(52px) translateX(150px);
}
50% {
width: 100px;
transform: translateY(52px) translateX(110px);
}
80% {
transform: translateY(52px) translateX(-110px);
width: 100px;
}
90%,
100% {
transform: translateY(52px) translateX(-155px);
width: 0;
}
}
<div class="block">
<div class="centerBlock">
<div class="lineTop"></div>
<div class="lineBottom"></div>
<div class="bl right">
<div class="border"></div>
</div>
<div class="back">
<div class="bl left"></div>
</div>
</div>
</div>
svg
,stroke-dashoffset
,stroke-dasharray