
/**
  * in-and-out
  *
  * @author in-and-out
*/
@-webkit-keyframes in-and-out {
  0%, 30% {
    -webkit-transform: rotate(calc(var(--offset) * -1deg));
            transform: rotate(calc(var(--offset) * -1deg)); }
  70%, 100% {
    -webkit-transform: rotate(calc(var(--offset) * 1deg));
            transform: rotate(calc(var(--offset) * 1deg)); } }
@keyframes in-and-out {
  0%, 30% {
    -webkit-transform: rotate(calc(var(--offset) * -1deg));
            transform: rotate(calc(var(--offset) * -1deg)); }
  70%, 100% {
    -webkit-transform: rotate(calc(var(--offset) * 1deg));
            transform: rotate(calc(var(--offset) * 1deg)); } }

@-webkit-keyframes in-and-out-two {
  0%, 30% {
    -webkit-transform: rotate(calc(var(--offset) * 1deg));
            transform: rotate(calc(var(--offset) * 1deg)); }
  70%, 100% {
    -webkit-transform: rotate(calc(var(--offset) * -1deg));
            transform: rotate(calc(var(--offset) * -1deg)); } }

@keyframes in-and-out-two {
  0%, 30% {
    -webkit-transform: rotate(calc(var(--offset) * 1deg));
            transform: rotate(calc(var(--offset) * 1deg)); }
  70%, 100% {
    -webkit-transform: rotate(calc(var(--offset) * -1deg));
            transform: rotate(calc(var(--offset) * -1deg)); } }

@-webkit-keyframes in-and-out-children {
  0%, 50% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px); }
  80%, 100% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px); } }

@keyframes in-and-out-children {
  0%, 50% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px); }
  80%, 100% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px); } }

@-webkit-keyframes in-and-out-two-children {
  0%, 50% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px); }
  80%, 100% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px); } }

@keyframes in-and-out-two-children {
  0%, 50% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px); }
  80%, 100% {
    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px); } }

.in-and-out {
  --offset: 18; }
  .in-and-out > div {
    --radius: 30;
    --size: 10;
    height: calc(var(--size) * 1px);
    width: calc(var(--size) * 1px);
    position: absolute; }
    .in-and-out > div:nth-of-type(1) {
      --multiplier: 1;
      -webkit-animation: in-and-out 1s infinite ease both;
              animation: in-and-out 1s infinite ease both; }
      .in-and-out > div:nth-of-type(1) div {
        -webkit-animation: in-and-out-children 1s infinite ease;
                animation: in-and-out-children 1s infinite ease; }
    .in-and-out > div:nth-of-type(2) {
      --multiplier: 2;
      -webkit-animation: in-and-out-two 1s infinite ease both;
              animation: in-and-out-two 1s infinite ease both; }
      .in-and-out > div:nth-of-type(2) div {
        -webkit-animation: in-and-out-two-children 1s infinite ease;
                animation: in-and-out-two-children 1s infinite ease; }
  .in-and-out div div {
    background: var(--primary);
    border-radius: 100%;
    height: 100%;
    position: absolute;
    width: 100%; }
    .in-and-out div div:nth-child(1) {
      --rotation: 72; }
    .in-and-out div div:nth-child(2) {
      --rotation: 144; }
    .in-and-out div div:nth-child(3) {
      --rotation: 216; }
    .in-and-out div div:nth-child(4) {
      --rotation: 288; }
    .in-and-out div div:nth-child(5) {
      --rotation: 360; }