animarte/animations/paper-plane/flying-1.css

Making the digital world a little more animated place

.animarte {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  width: var(--animarte-size);
  height: var(--animarte-size);
  color: var(--animarte-color);
}

.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(1), .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(2), .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  animation-name: paperPlaneFlying1;
  animation-duration: var(--animarte-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(1) {
  z-index: 1;
  clip-path: polygon(10% 10%, 100% 100%, 10% 100%, 10% 55%, 100% 100%, 10% 45%);
  background-color: currentColor;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(2) {
  z-index: -2;
  clip-path: polygon(0% 60%, 100% 100%, 10% 45%);
  background-color: color-mix(in srgb, currentColor 90%, #000);
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(3) {
  z-index: -1;
  clip-path: polygon(0% 60%, 100% 100%, 10% 55%);
  background-color: color-mix(in srgb, currentColor 80%, #000);
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4), .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5) {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  width: 40%;
  height: 20%;
  border-radius: 50%;
  animation-name: paperPlaneClouds1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::before, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::after, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::before, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.8;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::before, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::before {
  width: 30%;
  height: 30%;
  top: 0;
  left: 0;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4)::after, .animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5)::after {
  width: 40%;
  height: 40%;
  bottom: 0;
  right: -10%;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(4) {
  z-index: -3;
  animation-duration: calc(var(--animarte-speed) / 0.9);
  top: 15%;
}
.animarte-paper-plane--flying-1 .animarte-paper-plane__element:nth-child(5) {
  z-index: 2;
  animation-duration: calc(var(--animarte-speed) / 1.1);
  bottom: 15%;
}

@keyframes paperPlaneFlying1 {
  0%, 100% {
    transform: translate(-50%, -75%) rotate(-45deg);
  }
  12.5% {
    transform: translate(-50%, -85%) rotate(-55deg);
  }
  25% {
    transform: translate(-50%, -100%) rotate(-65deg);
  }
  37.5% {
    transform: translate(-50%, -90%) rotate(-55deg);
  }
  50% {
    height: 50%;
    transform: translate(-50%, -75%) rotate(-45deg);
  }
  62.5% {
    transform: translate(-50%, -65%) rotate(-35deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(-25deg);
  }
  87.5% {
    transform: translate(-50%, -65%) rotate(-35deg);
  }
}
@keyframes paperPlaneClouds1 {
  0% {
    left: 100%;
    transform: translateX(100%);
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 0;
    transform: translateX(-100%);
  }
}