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;
}

还可以通过jquery设置css实现

$('.imgBox').hover(
            function () {
                $('.imgBoxMask1').fadeIn();

                $('.imgBoxMask1').addClass("a");
                $('.imgBoxMask1').addClass("elasticInDown");
            },
            function () {
                $('.imgBoxMask1').hide();
                $('.imgBoxMask1').removeClass("a");
                $('.imgBoxMask1').removeClass("elasticInDown");
            }
        );

还可以通过
animation:mymove 5s设置keysframe实现动画