CODEWITHSUNDEEP
javascripthtmlcsssass
Freddy
Freddy

Reputation: 867

Making keyframe animation play after every 5 seconds

I have seen a previous thread on this topic (see here) but working with multiple offset percentages ruins the way the animation works.

For example, this is how the animation works currently:

Splitting();
:root {
  --black: #000000;
  --white: #ffffff;
}

body {
  background: var(--black);
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h2 {
  font-size: 100px;
}

@keyframes bounce-char {
  20% {
    transform: translateY(0%) scale(1.3, 0.8);
  }
  70% {
    transform: translateY(-40%) scale(0.8, 1.2);
  }
}
h2 .char {
  line-height: 1;
  transform-origin: center bottom;
  animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(0.05s * var(--char-index) );
  animation-duration: calc( 0.8s + ( 0.03s * var(--char-total)) );
  animation-name: bounce-char;
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />


<h2 data-splitting>Hello</h2>

And what I'm trying to do is to make it bounce once, then bounce again after 5 seconds. To achieve this, I've had a play around with the offsets, as the previous thread suggested, but here are my results:

Splitting();
:root {
  --black: #000000;
  --white: #ffffff;
}

body {
  background: var(--black);
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h2 {
  font-size: 100px;
}

@keyframes bounce-char {
  2%, 18% {
    transform: translateY(0%) scale(1.3, 0.8);
  }
  4%, 16% {
    transform: translateY(0%) scale(1.3, 0.8);
  }
  6%, 10%, 14% {
    transform: translateY(0%) scale(1.3, 0.8);
  }
  8%, 12% {
    transform: translateY(-40%) scale(0.8, 1.2);
  }
  18.1% {
    transform: translate3d(0px, 0, 0);
  }
}
h2 .char {
  line-height: 1;
  transform-origin: center bottom;
  animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
  animation-fill-mode: both;
  animation-delay: calc(0.05s * var(--char-index));
  animation-name: bounce-char;
  animation-duration: 5s;
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />

<h2 data-splitting>Hello</h2>

Unsure how I can extend two transform properties over multiple offsets to achieve this.

Any ideas?

Upvotes: 0

Views: 323

Answers (1)

A Haworth
A Haworth

Reputation: 36492

The keyframes don't have to be quite so complicated.

What we want is for a character to bounce and then to stay unbounced for 5 seconds.

So the whole duration of a character's animation has to extend by a further 4.2 seconds (roughly, you'll want to play around with the timing to get it exactly as you want it).

Splitting();
:root {
  --black: #000000;
  --white: #ffffff;
}

body {
  background: var(--black);
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h2 {
  font-size: 100px;
}

@keyframes bounce-char {
  2% {
    transform: translateY(0%) scale(1.3, 0.8);
  }
  7% {
    transform: translateY(-40%) scale(0.8, 1.2);
  }
  12%,
  100% {
    transform: translateY(0%);
  }
}

h2 .char {
  line-height: 1;
  transform-origin: center bottom;
  animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(0.05s * var(--char-index));
  animation-duration: calc(4.2s + 0.8s + ( 0.03s * var(--char-total)));
  animation-name: bounce-char;
}
<head>
  <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
  <h2 data-splitting>Hello</h2>

Upvotes: 2

Related Questions