Making keyframe animation play after every 5 seconds
Question
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?
1 answers
solution1
0 2022-09-21 05:38:13
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.