如何使用CSS3动画实现弹跳效果
& lthtml？xmlns = " http://www . w3 . org/1999/XHTML " & gt；
& lthead & gt
& lttitle & gt用CSS3动画创建一个小球的跳跃动画效果
& lt链接？rel="stylesheet "？type="text/css "？href="index.css "？/& gt；
& lt/head & gt；
& ltbody & gt
& lt节？class="main " >
& ltdiv？id="ballWrapper " >
& ltdiv？id = " ball " & gt& lt/div & gt；
& ltdiv？id = " ballShadow " & gt& lt/div & gt；
& lt/div & gt；
& lt/section & gt；
& lt/body & gt；
& lt/html & gt；CSS代码(在与html相同的目录中创建一个index.css文件)
# ballWrapper {位置:固定；top:35%；左:50%；z指数:100；左边距:-70px；宽度:140 px；高度:300px光标:指针；-WebKit-过渡:全部？5s？线性？0s；-moz-过渡:全部？5s？线性？0s；过渡:全部？5s？线性？0s；-WebKit-transform:scale(1)；-moz-transform:scale(1)；-o-transform:scale(1)；transform:scale(1)；-ms-transform:scale(1)}
#ballWrapper:active{cursor:指针；-WebKit-transform:scale(0)；-moz-transform:scale(0)；-o-transform:scale(0)；transform:scale(0)；-ms-transform:scale(0)}
# ball {位置:绝对；top:0；z指数:11；宽度:140 px；身高:140 px；边框半径:70px背景:# bbb背景:url(数据:image/SVG+XML；？背景:？-WebKit-渐变(线性，？向左？顶，？向左？屁股，？色停(0%，rgba(187，187，187，1))，？色停(99%，rgba(119，119，119，1))；？背景:？-WebKit-线性-渐变(顶部，？rgba(187，187，187，1)？0%，rgba(119，119，119，1)？99%);？背景:？-o-线性-渐变(顶部，？rgba(187，187，187，1)？0%，rgba(119，119，119，1)？99%);？背景:？-ms-线性-梯度(顶部，？rgba(187，187，187，1)？0%，rgba(119，119，119，1)？99%);？背景:？线性渐变(顶部，rgba(187，187，187，1)？0%，rgba(119，119，119，1)？99%);？方框阴影:？插页？0?-5px？15px？rgba(255，255，255，0.4)，？插页？-2px？-1px？40px？rgba(0，0，0，0.4)，？0?0?1px？#000;？光标:？指针；？base64、PD 94 bwwgdmvyc 2 lvbj 0 IMS 4 wiia/pgo 8 C3 znihhtbg 5 zpsjodhrwoi 8 VD 3d 3 lnczlm 9 yzy 8 ymdawl 3 N2 zyigd 2 lkdgg 9 ijewmcuiighlawdodd 0 imtawjsigdmlld 0j ved 0 imcawidegmsigchjlc 2 vydmvbc 3 bly 3 rsyxrpbz 0 IBM 9 uzsi+ciaggpgxpbmvhckdyywrpzw 50 iglkpsjncmfklxv背景:-moz-linear-gradient(top，rgba(187，187，187，1)？0，rgba(119，119，119，1)？99%);过滤器:progid:DXImageTransform。Microsoft.gradient(？startColorstr='#bbbbbb '，？endColorstr='#777777 '，？GradientType=0？);-WebKit-动画:跳转？1s？无限；-moz-动画:跳？1s？无限；-o-animation:跳？1s？无限；-ms-animation:跳？1s？无限；动画:跳？1s？无限}
# ball::after { position:absolute；top:10px；左:30pxz指数:10；宽度:80px高度:40px边框半径:40px/20px；背景:url(数据:image/SVG+XML；？背景:？-WebKit-渐变(线性，？向左？顶，？向左？屁股，？色停(0%，rgba(232，232，232，1))，？色停(1%，rgba(232，232，232，1))，？色停(100%，rgba(255，255，255，0)))；？背景:？-WebKit-线性-渐变(顶部，？rgba(232，232，232，1)？0%，rgba(232，232，232，1)？1%，rgba(255，255，255，0)？100%);？背景:？-o-线性-渐变(顶部，？rgba(232，232，232，1)？0%，rgba(232，232，232，1)？1%，rgba(255，255，255，0)？100%);？背景:？-ms-线性-梯度(顶部，？rgba(232，232，232，1)？0%，rgba(232，232，232，1)？1%，rgba(255，255，255，0)？100%);？背景:？线性渐变(顶部，rgba(232，232，232，1)？0%，rgba(232，232，232，1)？1%，rgba(255，255，255，0)？100%);？内容:？"";？base64、PD 94 bwwgdmvyc 2 lvbj 0 IMS 4 wiia/pgo 8 C3 znihhtbg 5 zpsjodhrwoi 8 VD 3d 3 lnczlm 9 yzy 8 ymdawl 3 N2 zyigd 2 lkdgg 9 ijewmcuiighlawdodd 0 imtawjsigdmlld 0j ved 0 imcawidegmsigchjlc 2 vydmvbc 3 bly 3 rsyxrpbz 0 IBM 9 uzsi+ciaggpgxpbmvhckdyywrpzw 50 iglkpsjncmfklxv背景:-moz-linear-gradient(top，rgba(232，232，232，1)？0，rgba(232，232，232，1)？1%，rgba(255，255，255，0)？100%);过滤器:progid:DXImageTransform。Microsoft.gradient(？startColorstr='#e8e8e8 '，？endColorstr='#00ffffff '，？GradientType=0？)}
# ballShadow {位置:绝对；底部:0；左:50%；z指数:10；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-WebKit-transform:scaleY(. 3)；-moz-transform:scaleY(. 3)；-o-transform:scaleY(. 3)；transform:scaleY(. 3)；-ms-transform:scaleY(. 3)；-WebKit-动画:缩小？1s？无限；-moz-动画:缩小？1s？无限；-o-animation:缩小？1s？无限；-ms-animation:缩小？1s？无限；动画:缩小？1s？无限}
@-WebKit-关键帧？跳转{ 0% { top:0；-WebKit-动画-计时-功能:淡入}
50% { top:140 px；身高:140 px；-WebKit-动画-计时-功能:缓出}
55% { top:160 px；身高:120 px；边框半径:70px/60px；-WebKit-动画-计时-功能:淡入}
65% { top:120 px；身高:140 px；边框半径:70px-WebKit-动画-计时-功能:缓出}
95% { top:0；-WebKit-动画-计时-功能:淡入}
100% { top:0；-WebKit-动画-计时-功能:淡入}
}
@-moz-关键帧？跳转{ 0% { top:0；-moz-动画-计时-功能:淡入}
50% { top:140 px；身高:140 px；-moz-动画-计时-功能:缓出}
55% { top:160 px；身高:120 px；边框半径:70px/60px；-moz-动画-计时-功能:淡入}
65% { top:120 px；身高:140 px；边框半径:70px-moz-动画-计时-功能:缓出}
95% { top:0；-moz-动画-计时-功能:淡入}
100% { top:0；-moz-动画-计时-功能:淡入}
}
@-o-关键帧？跳转{ 0% { top:0；-o-动画-计时-功能:淡入}
50% { top:140 px；身高:140 px；-o-动画-计时-功能:缓出}
55% { top:160 px；身高:120 px；边框半径:70px/60px；-o-动画-计时-功能:淡入}
65% { top:120 px；身高:140 px；边框半径:70px-o-动画-计时-功能:缓出}
95% { top:0；-o-动画-计时-功能:淡入}
100% { top:0；-o-动画-计时-功能:淡入}
}
@-ms-关键帧？跳转{ 0% { top:0；-ms-动画-计时-功能:淡入}
50% { top:140 px；身高:140 px；-ms-动画-计时-功能:缓出}
55% { top:160 px；身高:120 px；边框半径:70px/60px；-ms-动画-计时-功能:淡入}
65% { top:120 px；身高:140 px；边框半径:70px-ms-动画-计时-功能:缓出}
95% { top:0；-ms-动画-计时-功能:淡入}
100% { top:0；-ms-动画-计时-功能:淡入}
}
@关键帧？跳转{ 0% { top:0；动画-定时-功能:淡入}
50% { top:140 px；身高:140 px；动画-计时-功能:缓出}
55% { top:160 px；身高:120 px；边框半径:70px/60px；动画-定时-功能:淡入}
65% { top:120 px；身高:140 px；边框半径:70px动画-计时-功能:缓出}
95% { top:0；动画-定时-功能:淡入}
100% { top:0；动画-定时-功能:淡入}
}
@-WebKit-关键帧？收缩{ 0% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-WebKit-动画-计时-功能:淡入}
50% { bottom:30px；左边距:-10px；宽度:20px高度:5px边框半径:20px背景:rgba(20，20，20，.. 3)；方框阴影:0？0?20px？35px？rgba(20，20，20，.. 3)；-WebKit-动画-计时-功能:缓出}
100% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-WebKit-动画-计时-功能:淡入}
}
@-moz-关键帧？收缩{ 0% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-moz-动画-计时-功能:淡入}
50% { bottom:30px；左边距:-10px；宽度:20px高度:5px边框半径:20px背景:rgba(20，20，20，.. 3)；方框阴影:0？0?20px？35px？rgba(20，20，20，.. 3)；-moz-动画-计时-功能:缓出}
100% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-moz-动画-计时-功能:淡入}
}
@-o-关键帧？收缩{ 0% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-o-动画-计时-功能:淡入}
50% { bottom:30px；左边距:-10px；宽度:20px高度:5px边框半径:20px背景:rgba(20，20，20，.. 3)；方框阴影:0？0?20px？35px？rgba(20，20，20，.. 3)；-o-动画-计时-功能:缓出}
100% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-o-动画-计时-功能:淡入}
}
@-ms-关键帧？收缩{ 0% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-ms-动画-计时-功能:淡入}
50% { bottom:30px；左边距:-10px；宽度:20px高度:5px边框半径:20px背景:rgba(20，20，20，.. 3)；方框阴影:0？0?20px？35px？rgba(20，20，20，.. 3)；-ms-动画-计时-功能:缓出}
100% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；-ms-动画-计时-功能:淡入}
}
@关键帧？收缩{ 0% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；动画-定时-功能:淡入}
50% { bottom:30px；左边距:-10px；宽度:20px高度:5px边框半径:20px背景:rgba(20，20，20，.. 3)；方框阴影:0？0?20px？35px？rgba(20，20，20，.. 3)；动画-计时-功能:缓出}
100% { bottom:0；左边距:-30px；宽度:60px身高:75px边框半径:30px/40px；背景:rgba(20，20，20，. 1)；方框阴影:0？0?20px？35px？rgba(20，20，20，. 1)；动画-定时-功能:淡入}
}