How do I sync css animations? or even put it together?

Question

My problem is that I want to loop the animation but I don't know how to solve it. i tried to use animation infinite unfortunately i couldn't solve the problem so i would contact you if you can help with this. The code would be the loading screen of a website. I want the animation to go on all the time. So how can this be solved?

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes toXCenter {
  to {
    transform: translateX(-50%);
  }
}

@keyframes toFullHeight {
  to {
    height: 100%;
  }
}

body {
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
}

.icon {
  animation: fadeIn 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0.8s 1 forwards, fadeOut 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 7s 1 forwards;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  height: 220px;
  left: 50%;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 220px;
}

.icon__content {
  animation: moveDown 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 6s 1 forwards;
  height: 100%;
  position: relative;
  width: 100%;
}

@keyframes moveDown {
  to {
    transform: translateY(100%);
  }
}

.icon__finger {
  animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
  background-color: #FFCC80;
  border-radius: 50px 50px 0 0;
  bottom: 0;
  content: "";
  height: 136px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  transform: translateX(-50%) translateY(200px);
  width: 95px;
  z-index: 1;
}

.icon__finger:before {
  background-color: rgba(0, 0, 0, 0.025);
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  width: 50%;
  z-index: -1;
}

.icon__finger:after {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0 0 50px 50px;
  content: "";
  height: 70px;
  left: 15px;
  position: absolute;
  right: 15px;
  top: 0;
}

.icon__nail {
  animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px 20px 50px 50px;
  bottom: 75px;
  content: "";
  height: 110px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  transform: translateX(-50%) translateY(200px);
  width: 60px;
  z-index: 2;
}

.icon__nail:before {
  animation: toFullHeight 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s 1 forwards;
  background-color: #FFFFFF;
  border-radius: 0 0 50px 50px;
  bottom: 0;
  content: "";
  height: 0%;
  position: absolute;
  width: 100%;
  z-index: 3;
}

.icon__nail:after {
  animation: toFullHeight 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 3.6s 1 forwards, colours 4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0s infinite alternate;
  background-color: #F50057;
  border-radius: 0 0 50px 50px;
  bottom: 0;
  content: "";
  height: 0%;
  position: absolute;
  width: 100%;
  z-index: 3;
}

@keyframes colours {
  0% {
    background-color: #E91E63;
  }
  50% {
    background-color: #9C27B0;
  }
  100% {
    background-color: #2196F3;
  }
}

.nail__gloss {
  border-radius: 0 0 20px;
  bottom: 12px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  width: 26px;
  z-index: 4;
}

.nail__gloss:before {
  animation: toFullHeight 1.2s cubic-bezier(0.435, 0.715, 0.355, 0.595) 4.6s 1 forwards;
  background-color: rgba(255, 255, 255, 0.5);
  bottom: 0;
  content: "";
  height: 0%;
  position: absolute;
  right: 0;
  width: 50%;
}

<div class="icon">
  <div class="icon__content">
    <div class="icon__nail">
      <div class="nail__gloss"></div>
    </div>
    <div class="icon__finger">
    </div>
  </div>
</div>

https://codepen.io/drelaky/pen/LYybLMQ

I want the animation to go on all the time. So how can this be solved? — Drelaky, Jul 19 '21 at 12:32
Does this answer your question? [How can I connect a CSS animation's end to the beginning so it smoothly continues?](https://stackoverflow.com/questions/52584029/how-can-i-connect-a-css-animations-end-to-the-beginning-so-it-smoothly-continue) — Heretic Monkey, Jul 19 '21 at 12:37
Unfortunately not because I work on multiple keyframes. Can't coordinate them? — Drelaky, Jul 19 '21 at 12:42
Way 1: Modify your keyframes, so that they each do what you want over a _fixed_ animation duration, that is the same for all of them. If you have an overall animation duration of X, and you want what one of the keyframes does to happen only during the second half of that time - then move the parts in the 0% to 100% range of the keyframe to 50% to 100% - and fill 0% to 50% with whatever values are sensible for the “default state” of the affected element. — CBroe, Jul 19 '21 at 13:00
Way 2: Set up an `animationend` handler for the longest animation in JS; then you can “restart” all of them, when the longest one has finished. — CBroe, Jul 19 '21 at 13:01
@CBroe is right. You should start by ensuring that _every_ `@keyframes` animation has _the same duration_ - say `8s`. Then instead of writing declaring delay-before-starting into the `animation:` property, write them into the actual `@keyframes` percentages. That is, don't declare a start-delay of `2s`, but actually have nothing happen between `0%` and `25%`. That way every animation begins at the same time, but each animation only becomes apparent at the designated time. — Rounin, Jul 19 '21 at 15:09

score 0 · Accepted Answer · answered Jul 19 '21 at 14:17

I calculated the total animation time and it came to be about 8s. I have two answers for you:

Change the content of loader to restart the animation:

setInterval(() => {
  let loader = document.querySelector("#loader");
  let icon = loader.innerHTML;
  loader.innerHTML = "";
  loader.innerHTML = icon;
}, 8000);

@keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes fadeOut {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      @keyframes toXCenter {
        to {
          transform: translateX(-50%);
        }
      }
      @keyframes toFullHeight {
        to {
          height: 100%;
        }
      }
      body {
        background-color: rgb(58, 58, 58);
      }
      .icon {
        animation: fadeIn 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0.8s 1 forwards, fadeOut 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 7s 1 forwards;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        height: 220px;
        left: 50%;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 220px;
      }
      .icon__content {
        animation: moveDown 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 6s 1 forwards;
        height: 100%;
        position: relative;
        width: 100%;
      }
      @keyframes moveDown {
        to {
          transform: translateY(100%);
        }
      }
      .icon__finger {
        animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
        background-color: #FFCC80;
        border-radius: 50px 50px 0 0;
        bottom: 0;
        content: "";
        height: 136px;
        left: 50%;
        overflow: hidden;
        position: absolute;
        right: 0;
        transform: translateX(-50%) translateY(200px);
        width: 95px;
        z-index: 1;
      }
      .icon__finger:before {
        background-color: rgba(0, 0, 0, 0.025);
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        width: 50%;
        z-index: -1;
      }
      .icon__finger:after {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 0 0 50px 50px;
        content: "";
        height: 70px;
        left: 15px;
        position: absolute;
        right: 15px;
        top: 0;
      }
      .icon__nail {
        animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 20px 20px 50px 50px;
        bottom: 75px;
        content: "";
        height: 110px;
        left: 50%;
        overflow: hidden;
        position: absolute;
        right: 0;
        transform: translateX(-50%) translateY(200px);
        width: 60px;
        z-index: 2;
      }
      .icon__nail:before {
        animation: toFullHeight 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s 1 forwards;
        background-color: #FFFFFF;
        border-radius: 0 0 50px 50px;
        bottom: 0;
        content: "";
        height: 0%;
        position: absolute;
        width: 100%;
        z-index: 3;
      }
      .icon__nail:after {
        animation: toFullHeight 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 3.6s 1 forwards, colours 4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0s infinite alternate;
        background-color: #F50057;
        border-radius: 0 0 50px 50px;
        bottom: 0;
        content: "";
        height: 0%;
        position: absolute;
        width: 100%;
        z-index: 3;
      }
      @keyframes colours {
        0% {
          background-color: #E91E63;
        }
        50% {
          background-color: #9C27B0;
        }
        100% {
          background-color: #2196F3;
        }
      }
      .nail__gloss {
        border-radius: 0 0 20px;
        bottom: 12px;
        height: 100px;
        overflow: hidden;
        position: absolute;
        right: 10px;
        width: 26px;
        z-index: 4;
      }
      .nail__gloss:before {
        animation: toFullHeight 1.2s cubic-bezier(0.435, 0.715, 0.355, 0.595) 4.6s 1 forwards;
        background-color: rgba(255, 255, 255, 0.5);
        bottom: 0;
        content: "";
        height: 0%;
        position: absolute;
        right: 0;
        width: 50%;
      }

<div id='loader'>
  <div class="icon">
      <div class="icon__content">
        <div class="icon__nail">
          <div class="nail__gloss"></div>
        </div>
        <div class="icon__finger">
        </div>
      </div>
    </div>
</div>

Record it using a screen recorder, convert it into gif and use it on the website. This will take less time and energy of the browser to render the loader.

How do I sync css animations? or even put it together?

1 Answers1