Хочу сделать вот такую анимацию: https://dribbble.com/shots/3633228-Avanti-e-indietro-loader .
Но застопорился :( Буду очень благодарен кто поможет доделать анимацию (желательно доделать с помощью javascript/jquery)! Вот код:
:root {
--duration: 1.5s;
--container-size: 210px;
--box-size: 33px;
--box-border-radius: 15%;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: var(--container-size);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.📦 {
width: var(--box-size);
height: var(--box-size);
position: relative;
display: block;
transform-origin: -50% center;
border-radius: 50%;
}
.📦:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: orange;
border-radius: 50%;
animation-delay: 5s;
}
.📦:nth-child(1) {
animation: slide var(--duration) ease-in-out infinite alternate;
}
.📦:nth-child(1):after {
animation: color-change var(--duration) ease-in-out infinite alternate;
}
.📦:nth-child(2) {
animation: flip-1 var(--duration) infinite alternate;
}
.📦:nth-child(3) {
animation: flip-2 var(--duration) infinite alternate;
}
.📦:nth-child(4) {
animation: flip-3 var(--duration) infinite alternate;
}
.📦:nth-child(5) {
animation: flip-4 var(--duration) infinite alternate;
}
.📦:nth-child(2):after {
background-color: orange;
}
.📦:nth-child(3):after {
background-color: darkorange;
}
.📦:nth-child(4):after {
background-color: tomato;
}
.📦:nth-child(5):after {
background-color: deeppink;
}
@keyframes slide {
0% {
background-color: orange;
transform: translatex(0vw);
box-shadow: 6px 6px rgba(0,0,0,0.09);
}
100% {
background-color: deeppink;
transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.54)));
box-shadow: 6px 6px rgba(0,0,0,0.09);
}
}
@keyframes color-change {
0% {
background-color: orange;
}
100% {
background-color: deeppink;
}
}
@keyframes flip-1 {
0%,
15% {
transform: rotate(0);
box-shadow: 6px 6px rgba(0,0,0,0.09);
}
35%,
100% {
transform: rotate(-180deg);
box-shadow: -6px -6px rgba(0,0,0,0.09);
}
}
@keyframes flip-2 {
0%,
30% {
transform: rotate(0);
box-shadow: 6px 6px rgba(0,0,0,0.09);
}
50%,
100% {
transform: rotate(-180deg);
box-shadow: -6px -6px rgba(0,0,0,0.09);
}
}
@keyframes flip-3 {
0%,
45% {
transform: rotate(0);
box-shadow: 6px 6px rgba(0,0,0,0.09);
}
65%,
100% {
transform: rotate(-180deg);
box-shadow: -6px -6px rgba(0,0,0,0.09);
}
}
@keyframes flip-4 {
0%,
60% {
transform: rotate(0);
box-shadow: 6px 6px rgba(0,0,0,0.09);
}
80%,
100% {
transform: rotate(-180deg);
box-shadow: -6px -6px rgba(0,0,0,0.09);
}
}
<div class="circle">
<div class="📦"></div>
<div class="📦"></div>
<div class="📦"></div>
<div class="📦"></div>
<div class="📦"></div>
</div>
v
под счетчиком голосов ответа