我以前看过关于这个主题的帖子(请参阅此处(，但使用多个offset百分比会破坏动画的工作方式。
例如，这就是动画当前的工作方式：
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>我想做的是让它反弹一次，然后在5秒后再次反弹。为了实现这一点，正如前一个线程所建议的那样，我对偏移进行了一次尝试，但以下是我的结果：
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>不确定如何在多个偏移上扩展两个变换属性以实现这一点。
有什么想法吗？
关键帧不必如此复杂。
我们想要的是一个角色反弹，然后保持5秒的未反弹状态。
因此，角色动画的整个持续时间必须再延长4.2秒(大致上，你会想按照你想要的时间来播放(。
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>