Cómo utilizar la animación CSS3 para lograr un efecto de rebote

Código HTMLlt;html?xmlns="http://www.w3.org/1999/xhtml"gt;

lt;headgt;

lt ；Titlegt;Utiliza animación CSS3 para crear un efecto de animación de rebote para la pelotalt;/Titlegt;

lt;link?rel="stylesheet"?type="text/css"?href="index .css "?

lt;/headgt;

lt;bodygt;

lt;section?class="main"gt;

lt;div?id="ballWrapper"gt;

lt;div?id="ball"gt;lt;/divgt;

lt;div?id=" ballShadow" gt;lt;/divgt;

lt;/divgt;

lt;/sectiongt;

lt;/body gt;

lt;/htmlgt;

Código CSS (crear index.

archivo css) #ballWrapper {posición: fija; arriba: 35; izquierda: 50; índice-izquierdo: -70px; ancho: 140px; cursor: puntero; s?lineal?0s; -moz-transición: todos?5s?lineal?0s; transición: todos?5s?s; -webkit-transform: escala(1); transformar: escala(1); transformar: escala(1); -ms-transform: escala(1)}

#ballWrapper: active{cursor: puntero; -moz-transform: escala(0); -o-transform: escala(0); transformar: escala(0); -ms-transform: escala(0)}

#ball{posición: absoluta ; arriba: 0; índice z: 11; ancho: 140 px; alto: 140 px; fondo: # bbb; url (datos: imagen/svg xml; ?fondo:?-webkit-gradient( lineal, arriba izquierda, abajo izquierda, color-stop(0,rgba(187,187,187,1)), color-stop(99,rgba(119,119,119,1)));?- webkit-linear-gradient(arriba, ?rgba(187,187,187,1)?0,rgba(119,119,119,1)?99);?fondo:?-o-gradiente-lineal(arriba,? rgba(187,187,187,1)?0,rgba(119,119,119,119,1)? 99);?fondo:?-ms-linear-gradient(arriba,?rgba(187,187,187 ,1)?0,rgba(119,119,119,119,1)?99);?fondo:?linear-gradient(arriba,?rgba(187,187,187,187 ,1)?0,?rgba (119,119,119,1)?99);?box-shadow:?inset?0?-5px?15px?rgba(255,255,255,0.4),?inset?-2px?-1px?40px? rgba(0,0,0,0,0.4),?0?0?0?1px?#000;?cursor:?pointer;?base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/ Pgo8c3ZnIHtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lk d Gg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRp

bz0ibm9uZSI CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEw MCU iPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3Rvc1jb2xvcj0iI2JiYmJiYiIgc3Rvc1vcGFjaXR5PSIxIi8 CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nz c3Ny Igc3RvcC1vcGFjaXR5PSIxIi8 CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNZy1nZW5lcmF0ZW QpIi AvPgo8L3N2Zz4 =); Fondo: -moz-linear-gradient(arriba, rgba(187, 187, 187, 1)? 0, rgba (119, 119, 119, 1)? Degradado(? startColorstr=); '#bbbbbbb ',?endColorstr='#777777',?GradientType=0?); -webkit-animation: jump?1s?infinite; -moz-animation: jump?1s?infinite; ?infinite; -ms-animation: jump?1s?infinite; animación: jump?1s?infinite}

#ball::after{position.-webkit-gradient(lineal, arriba izquierda, abajo izquierda, color-stop (0,rgba(232,232,232,1)), color-stop(1,rgba(232,232,232,1)), color-stop (100,rgba(255,255,255,255,0 ));?fondo:?-webkit-linear -gradiente(arriba,?rgba(232,232,232,1)?0,rgba(232,232,232,1)?1,rgba(255,255,255 , 0)?100);?fondo:?-o-gradiente-lineal(arriba,?rgba( 232,232,232,1)?0,rgba(232,232,232,1)?1,rgba(255,255,255,0)?100);?antecedentes:?-ms-linear-gradient(arriba,?rgba(232,232,232,1)?0 ,rgba(232,232,232,1)?1 ,rgba(255,255,255,0)?100);?antecedentes:?linear-gradient(top,?rgba(232,232,232,1)?1,rgba(255,255,255,0)? 100); ?fondo:?gradiente lineal(arriba,??rgba(

232, 232, 232, 1)? 0, rgba (232, 232, 232, 1)? 1, rgba (255, 255, 255, 0)? Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9 u ZSI CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAg PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8 CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW 9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8 CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5 PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4 =; Fondo: -moz-linear-gradient(arriba, rgba(232, 232, 232, 232, 1)?0, rgba(2 32, 232, 232, 1)?1 , rgba (255, 255, 255, 0)?100); filtro: progid.DXImageTransform.Microsoft.gradient(?startColorstr='#e8e8e8',?endColorstr='#00ffffff',?GradientType=0?) }

#ballShadow{ posición: absoluta; abajo: 0; izquierda: 50; margen izquierdo: -30px; alto: 75px; : rgba (20, 20, 20, .1); sombra de cuadro: 0?px?rgba (20, 20, 20, .1); -webkit-transform: escalaY (.3); (.3); -o-transformar: escalaY(.3); transformar: escalaY(.3); -ms-transformar: escalaY(.3); -webkit-animación: reducir?s?infinito; : shr

tinta?1s?infinite; -o-animación: encoger?1s?infinito; -ms-animación: encoger?1s?infinito; animación: encoger?1s?infinito}

@webkit-keyframes?jump{ 0{arriba: 0; -webkit-animation-timing-function: facilidad de entrada}

50{arriba: 140px; altura: 140px; -webkit-animation-timing-function: facilidad de salida}

55{arriba: 160px; altura: 140px; -webkit-animation-timing-function: facilidad}

55 {arriba: 160px; altura: 120px; 70px/60px; -webkit-animation-timing-function: facilidad de entrada}

65{arriba: 120px; altura: 140px; border-radius: 70px; -out}

95{top: 0; -función-de-timing-de-animación-webkit: entrada fácil}

100{top: 0; :ease-in}

}

@-moz-keyframes?jump{0{top:0;-moz-animation-timing-function:ease-in}

50{arriba: 140px; altura: 140px; -moz-animation-timing-function: facilidad}

55{arriba: 160px; radio: 70px/60px; -moz-animation-timing-function: facilidad de entrada}

65{arriba: 120px; altura: 140px; border-radius: 70px; :ease-out}

65{arriba: 160px; altura: 120px; radio del borde: 70px; -moz-animation-timing-function: facilidad de entrada}

95{top：0；-moz-animation-timing-function：facilidad de acceso}

100{top：0；-moz-animation-timing-function：facilidad de acceso}

}

}

}

Esta es la primera vez que utilizamos fotogramas clave.

p>@-o-keyframes?jump{0{top: 0; -o-animation-timing-function: facilidad de entrada}

50{top: 140px height: 140px; -timing-function.ease-out}

55{arriba: 160px; altura: 120px; border-radius: 70px/60px -o-animation-timing-function: facilidad de entrada}

65{arriba: 120px; altura: 140px; radio del borde: 70px; -o-animation-timing-function: facilidad}

95{arriba: 0; -función de sincronización: entrada fácil}

100{top: 0; -función de sincronización-o-animación: entrada fácil}

}

@-ms-keyframes?jump{0{top: 0; -ms-animation-timing-function: facilidad de entrada }

50{top: 140px height: 140px; -función: salida gradual}

55{arriba: 160 px; altura: 120 px; borde-ius: 70 px/ 60 px; -ms-animation-timing-function: entrada fácil}

65{arriba: 120px; altura: 140px; radio del borde: 70px; -ms-animation-timing-function: facilidad}

95{arriba: 0; función: entrada fácil}

100{top: 0; función de sincronización-ms-animación: entrada fácil}

}

}

>@keyframes?jump{0{arriba: 0; función de sincronización de animación: entrada fácil}

50{arriba: 140 px; altura: 140 px; salida fácil}

55{arriba: 160 px; altura: 120 px; radio del borde: 70 px/60 px; función de sincronización de animación: entrada fácil}

65{arriba: 120px; altura: 140px; radio de borde: 70px/60px; función de sincronización de animación: entrada fácil}< radio de borde: 70px; función de sincronización de animación: salida gradual}

95{arriba: 0; función de sincronización de animación: entrada fácil}

100{arriba: 0; función de sincronización de animación: entrada fácil}

}

@webkit-keyframes?shrink{0

{abajo: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; radio del borde: 0?0? 20px?35px?rgba(20, 20, 20, .1); -función-de-timing-de-animación-webkit: entrada fácil}

50{abajo: 30px; ancho izquierdo: -10px; :20px; altura: 5px; radio del borde: 20px; fondo: rgba(20,20,20,.3); ;-webkit-animation-timing-function:ease-out}

100{bottom: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; fondo: rgba(20, 20, 20, .1); sombra de cuadro: 0?0?20px?px?rgba(20, 20, 20, .1); -webkit-animation-función de sincronización: entrada fácil }

}

@-moz-keyframes?shrink{0{bottom: 0; margen izquierdo: -30px; ancho: 60px alto: 75px; /40px; fondo: rgba (20, 20, 20, .1); -moz-animation-timing-function: facilidad de entrada}

50{abajo: 30px; margen izquierdo: -10px; ancho: 20px; alto: 5px; radio del borde: 20px; ); sombra de cuadro: 0? 0? 20px? 35px? rgba (20, 20, 20, .3); -moz-animation-timing-function: salida lenta}

100{bottom: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; radio del borde: 0? ?rgba(20, 20, 20, .1); -moz-animation-timing-function: facilidad de entrada}

100{bottom: 0; margin-left: -30px; altura: 75px; -moz-animation-timing-function: facilidad de salida}

}

@-o-keyframes?shrink{0{bottom: 0; -30px; ancho: 60px; alto: 75px;

adius: 30px/40px; fondo: rgba (20, 20, 20, .1); -o-animación-sincronización -función: entrada fácil}

50{abajo: 30px; margen izquierdo: -10px; ancho: 20px; alto: 5px; radio del borde: 20px; ,.3);box-shadow:0?0?20px?35px?rgba(20,20,20,.3);-o-animation-timing-function:ease-out}

100 {abajo: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; radio del borde: 0?0? 20px?35px?rgba(20,20,20,.1);-o-función-de-timing-de-animación:ease-in}

}

@-ms-keyframes? reducir{0{ abajo: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; radio de borde: 30px/40px; ?0?20px?px? rgba(20, 20, 20, .1); -ms-animation-timing-function: facilidad de entrada}

50{bottom: 30px; 10px; ancho: 20px; alto: 5px; radio del borde: 20px; fondo: rgba (20, 20, 20, .3); -ms-animation-timing-function: facilidad de salida}

100{abajo: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; : rgba(20, 20, 20, .1); sombra de cuadro: 0? 0? 20px? 35px? rgba (20, 20, 20, .1);

}

@keyframes?shrink{0{bottom: 0; margen izquierdo: -30px; ancho.60px; alto: 75px; ：rgba(20, 20, 20, .1); sombra de cuadro: 0?px?rgba(20, 20, 20, .1); función de sincronización de animación: entrada fácil}

50{abajo: 30px; margen izquierdo: -10px; ancho: 20px alto: 5px;

20px; fondo: rgba (20, 20, 20, .3); función de sincronización de animación: salida gradual}

100{abajo: 0; margen izquierdo: -30px; ancho: 60px; alto: 75px; radio del borde: 30px/40px; sombra de cuadro: 0?0?20px?35px?rgba(20,20,20,.1); función de sincronización de animación: entrada fácil}

}