CSS3 动画

@-webkit-keyframes elasticInDown { ???0% { ???????opacity: 0; ???????-webkit-transform: translateY(-1000px); ???????-webkit-animation-timing-function: ease-in-out ???} ???60% { ???????opacity: 1; ???????-webkit-transform: translateY(30px); ???????-webkit-animation-timing-function: ease-in-out ???} ???80% { ???????-webkit-transform: translateY(-10px); ???????-webkit-animation-timing-function: ease-in-out ???} ???100% { ???????-webkit-transform: translateY(0) ???}}@-moz-keyframes elasticInDown { ???0% { ???????opacity: 0; ???????-moz-transform: translateY(-1000px); ???????-moz-animation-timing-function: ease-in-out ???} ???60% { ???????opacity: 1; ???????-moz-transform: translateY(30px); ???????-moz-animation-timing-function: ease-in-out ???} ???80% { ???????-moz-transform: translateY(-10px); ???????-moz-animation-timing-function: ease-in-out ???} ???100% { ???????-moz-transform: translateY(0) ???}}@-o-keyframes elasticInDown { ???0% { ???????opacity: 0; ???????-o-transform: translateY(-1000px); ???????-o-animation-timing-function: ease-in-out ???} ???60% { ???????opacity: 1; ???????-o-transform: translateY(30px); ???????-o-animation-timing-function: ease-in-out ???} ???80% { ???????-o-transform: translateY(-10px); ???????-o-animation-timing-function: ease-in-out ???} ???100% { ???????-o-transform: translateY(0) ???}}@keyframes elasticInDown { ???0% { ???????opacity: 0; ???????transform: translateY(-1000px); ???????animation-timing-function: ease-in-out ???} ???60% { ???????opacity: 1; ???????transform: translateY(30px); ???????animation-timing-function: ease-in-out ???} ???80% { ???????transform: translateY(-10px); ???????animation-timing-function: ease-in-out ???} ???100% { ???????transform: translateY(0) ???}}.elasticInDown { ???-webkit-animation-name: elasticInDown; ???-moz-animation-name: elasticInDown; ???-o-animation-name: elasticInDown; ???animation-name: elasticInDown}.a { ???-webkit-animation-fill-mode: both; ???-moz-animation-fill-mode: both; ???-ms-animation-fill-mode: both; ???-o-animation-fill-mode: both; ???animation-fill-mode: both; ???-webkit-animation-duration: .6s; ???-moz-animation-duration: .6s; ???-ms-animation-duration: .6s; ???-o-animation-duration: .6s; ???animation-duration: .6s}

.imgBoxMask2{ ???width: 100%; ???top: 0%; ???z-index: 99; ???position: absolute; ???text-align: center; ???transition: all 0.5s ease-in-out; ???-moz-transition: all 0.5s ease-in-out; ???-webkit-transition: all 0.5s ease-in-out; ???-o-transition: all 0.5s ease-in-out; ???opacity: 0;}.imgBox:hover .imgBoxMask2{ ???top: 40%; ???opacity: 1;}

$(‘.imgBox‘).hover( ???????????function () { ???????????????$(‘.imgBoxMask1‘).fadeIn(); ???????????????$(‘.imgBoxMask1‘).addClass("a"); ???????????????$(‘.imgBoxMask1‘).addClass("elasticInDown"); ???????????}, ???????????function () { ???????????????$(‘.imgBoxMask1‘).hide(); ???????????????$(‘.imgBoxMask1‘).removeClass("a"); ???????????????$(‘.imgBoxMask1‘).removeClass("elasticInDown"); ???????????} ???????);