四种标题文字动画特效

本页面的标题就是用的其中一种动画特效

h2.TitleAnimate b {
  display: inline-block;
  animation-name: var(--animation);
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  animation-delay: var(--delay);
}

@keyframes TitleAnimate1 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes TitleAnimate2 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes TitleAnimate3 {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
}

@keyframes TitleAnimate4 {
  0%, 100% {
    color: inherit;
  }
  50% {
    color: yellow;
  }
}

<h2 class="TitleAnimate">刘执喜的点滴记忆，专注WEB开发的工具人</h2>

let h2 = document.querySelector('.TitleAnimate')
h2.innerHTML = h2.textContent.replace(/\S/g, "<b>$&</b>") 
for(var i=0;i< document.querySelectorAll('.TitleAnimate b').length;i++) { 
	document.querySelectorAll('.TitleAnimate b')[i].setAttribute('style','--delay:'+i/10+"s"); 
};
// 四种动画效果可选: TitleAnimate1、 TitleAnimate2、 TitleAnimate3、 TitleAnimate4 ，默认使用TitleAnimate1
h2.style.setProperty('--animation', "TitleAnimate1");
h2.classList.remove('animate');
void h2.offsetWidth;
h2.classList.add('animate');