css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用 $(function(){ $((i){ $((){ rel $(); $().animate({ },500) setTimeout(dq,10) }) }) function dq(){ $().css({ , , , , , , }) } }) #frame position width height overflow border-radius #dis position left top opacity #dis li { display width height margin float text-align color border-radius background #photos img { float width height #photos position width .play{ animation @keyframes ma 0%,20% { margin-left 25%,40% 45%,60% 65%,80% 85%,100% } .num{ position display right border-radius background width line-height cursor color text-align opacity .num:nth-child(2) .num:nth-child(3) .num:nth-child(4) .num:nth-child(5)12345中国标志性建筑：天安门中国标志性建筑：东方明珠中国标志性建筑：布达拉宫中国标志性建筑：长城中国标志性建筑：天坛

请使用高版本狐火打开，没写兼容。

animation-delay为负值时 动画状态是浏览器加载时的已经有了的状态，相当于提前加载。

注意： 'animation-delay': '-10'+2*rel+'s', 

rel是点击时在HTML属性上传来的 全局变量

为什么乘以 2？

看关键帧和动画加载完成时间。总时间是10S；关键帧分为5段，所有10除以5得2。