日历轮播动画未重置到第0帧，最后一帧异常循环问题求助

算力阿峰

2026-4-7

各位大佬好，我做了一个日历轮播效果，包含2025年最后2个月、2026年全年12个月和2027年最初2个月，总共16帧画面。每个帧的展示时长是5秒，通过带动画的div来切换显示/隐藏下一张图。前面的帧切换都正常，但到最后一帧（第16帧）的时候动画就“卡壳”了——会重复两次最后一帧，然后直接跳回第3帧，完全不会回到开头重新循环。我调整过动画总时长，但还是没找到问题出在哪，麻烦帮忙看看！

html, body { width: 100vw; height: 100vh; overflow: hidden; } 
/* background: #c696eb; background: linear-gradient(270deg,rgba(198, 150, 235, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); */ 

/*-- ROTATE HUE --*/ 
@-webkit-keyframes rotateHue { 
  0% { filter: hue-rotate(0deg); } 
  20% { filter: hue-rotate(10deg); } 
  25% { filter: hue-rotate(20deg); } 
  45% { filter: hue-rotate(30deg); } 
  50% { filter: hue-rotate(40deg); } 
  70% { filter: hue-rotate(-30deg); } 
  75% { filter: hue-rotate(-20deg); } 
  95% { filter: hue-rotate(-10deg); } 
  100% { filter: hue-rotate(0deg); } 
} 
@keyframes rotateHue { 
  0% { filter: hue-rotate(0deg); } 
  20% { filter: hue-rotate(10deg); } 
  25% { filter: hue-rotate(20deg); } 
  45% { filter: hue-rotate(30deg); } 
  50% { filter: hue-rotate(40deg); } 
  70% { filter: hue-rotate(-30deg); } 
  75% { filter: hue-rotate(-20deg); } 
  95% { filter: hue-rotate(-10deg); } 
  100% { filter: hue-rotate(0deg); } 
} 

/*-- ROTATE FRAMES --*/ 
@-webkit-keyframes rotateFrame { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(180deg); } 
} 
@keyframes rotateFrame { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(180deg); } 
} 

/*-- OPEN TOP --*/ 
@-webkit-keyframes openTop { 
  0% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } 
  40% { transform: translate3d(-50%, -65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  70% { transform: translate3d(-50%, -65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  100% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
} 
@keyframes openTop { 
  0% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } 
  40% { transform: translate3d(-50%, -65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  70% { transform: translate3d(-50%, -65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  100% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
} 

/*-- OPEN BOTTOM --*/ 
@-webkit-keyframes openBottom { 
  0% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } 
  40% { transform: translate3d(-50%, 65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  70% { transform: translate3d(-50%, 65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  100% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
} 
@keyframes openBottom { 
  0% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } 
  40% { transform: translate3d(-50%, 65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  70% { transform: translate3d(-50%, 65vmax, 0); animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
  100% { transform: translate3d(-50%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } 
} 

/*-- SHOW-HIDE SLIDE --*/ 
@-webkit-keyframes showHideSlide { 
  0% { opacity: 1; pointer-events: auto; z-index: 1; } 
  25% { opacity: 0; pointer-events: none; z-index: -1; } 
  100% { opacity: 0; pointer-events: none; z-index: -1; } 
} 
@keyframes showHideSlide { 
  0% { opacity: 1; pointer-events: none; z-index: 1; } 
  25% { opacity: 0; pointer-events: none; z-index: -1; } 
  100% { opacity: 0; pointer-events: none; z-index: -1; } 
} 

/*-- BG IN/OUT --*/ 
@-webkit-keyframes bgInOut { 
  0% { transform: rotate(-45deg) scale(1.1); -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 
  33% { transform: rotate(0deg); } 
  50% { transform: rotate(0deg); } 
  66% { transform: rotate(0deg); -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } 
  100% { transform: rotate(45deg) scale(0.9); } 
} 
@keyframes bgInOut { 
  0% { transform: rotate(-45deg) scale(1.1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 
  33% { transform: rotate(0deg); } 
  50% { transform: rotate(0deg); } 
  66% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } 
  100% { transform: rotate(45deg) scale(0.9); } 
}

内容来源于stack exchange