css的各种动画

/*淡入*/
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    /*初始状态 透明度为0*/
    40% {
        opacity: 0;
    }
    /*过渡状态 透明度为0*/
    100% {
        opacity: 1;
    }
    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in {
    /*针对webkit内核*/
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.wrapper {
    animation: fade-in; /*动画名称*/
    animation-duration: 4.5s; /*动画持续时间*/
    -webkit-animation: fade-in 1.5s; /*针对webkit内核*/
}

/*由中间到两边*/
.center-spread {
    animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: center-spread-keyframes 2000ms ease 0ms 1 forwards;
}

@keyframes center-spread-keyframes {
    0% {
        opacity: 0;
        transform: rotateY(70deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        offset: 1
    }
}

@-webkit-keyframes center-spread-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: rotateY(70deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: rotateY(0deg);
        -webkit-offset: 1
    }
}

@-moz-keyframes center-spread-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: rotateY(70deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: rotateY(0deg);
        -moz-offset: 1
    }
}

@-o-keyframes center-spread-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: rotateY(70deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: rotateY(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes center-spread-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: rotateY(70deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: rotateY(0deg);
        -ms-offset: 1
    }
}

/*由上到下并且延迟出现*/
.up-enter1 {
    animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -moz-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -webkit-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -o-animation: up-enter-keyframes 2000ms ease 1000ms 1 forwards;
}

.up-enter2 {
    animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -moz-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -webkit-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -o-animation: up-enter-keyframes 2000ms ease 2000ms 1 forwards;
}

@keyframes up-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateY(-300%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        offset: 1
    }
}

@-moz-keyframes up-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateY(-300%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateY(0);
        -moz-offset: 1
    }
}

@-webkit-keyframes up-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateY(-300%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateY(0);
        -webkit-offset: 1
    }
}

@-o-keyframes up-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateY(-300%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateY(0);
        -o-offset: 1
    }
}

@-ms-keyframes up-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateY(-300%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateY(0);
        -ms-offset: 1
    }
}

/*反转出现*/
.reverse-enter {
    animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: reverse-enter-keyframes 2000ms ease 0ms 1 forwards;
}

/*一直反转*/
.reverse-infinite {
    animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
    -moz-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
    -webkit-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
    -o-animation: reverse-enter-keyframes 1500ms ease 0ms infinite forwards;
}

@keyframes reverse-enter-keyframes {
    0% {
        opacity: 0.1;
        transform: rotateY(200deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        offset: 1
    }
}

@-moz-keyframes reverse-enter-keyframes {
    0% {
        -moz-opacity: 0.1;
        -moz-transform: rotateY(200deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: rotateY(0deg);
        -moz-offset: 1
    }
}

@-webkit-keyframes reverse-enter-keyframes {
    0% {
        -webkit-opacity: 0.1;
        -webkit-transform: rotateY(200deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: rotateY(0deg);
        -webkit-offset: 1
    }
}

@-o-keyframes reverse-enter-keyframes {
    0% {
        -o-opacity: 0.1;
        -o-transform: rotateY(200deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: rotateY(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes reverse-enter-keyframes {
    0% {
        -ms-opacity: 0.1;
        -ms-transform: rotateY(200deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: rotateY(0deg);
        -ms-offset: 1
    }
}

/*由下往上出现*/
.down-enter1 {
    animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 0ms 1 forwards;
}

.down-enter2 {
    animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 1000ms 1 forwards;
}

.down-enter3 {
    animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 2000ms 1 forwards;
}

.down-enter4 {
    animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
    -moz-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
    -webkit-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
    -o-animation: down-enter-keyframes 2000ms ease 3000ms 1 forwards;
}

@keyframes down-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateY(300%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
        offset: 1
    }
}

@-moz-keyframes down-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateY(300%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateY(0%);
        -moz-offset: 1
    }
}

@-webkit-keyframes down-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateY(300%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateY(0%);
        -webkit-offset: 1
    }
}

@-o-keyframes down-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateY(300%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateY(0%);
        -o-offset: 1
    }
}

@-ms-keyframes down-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateY(300%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateY(0%);
        -ms-offset: 1
    }
}

/*倾斜*/
.skew {
    animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
    -moz-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
    -webkit-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
    -o-animation: skew-spread-keyframes 2000ms ease 1000ms 1 forwards;
}

@keyframes skew-spread-keyframes {
    0% {
        opacity: 0;
        transform: skewX(70deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: skewX(0deg);
        offset: 1
    }
}

@-webkit-keyframes skew-spread-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: skewX(70deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: skewX(0deg);
        -webkit-offset: 1
    }
}

@-moz-keyframes skew-spread-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: skewX(70deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: skewX(0deg);
        -moz-offset: 1
    }
}

@-o-keyframes skew-spread-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: skewX(70deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: skewX(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes skew-spread-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: skewX(70deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: skewX(0deg);
        -ms-offset: 1
    }
}

/*旋转*/
.rotate {
    animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
    -moz-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
    -webkit-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
    -o-animation: rotate-spread-keyframes 2000ms ease 2000ms 1 forwards;
}

@keyframes rotate-spread-keyframes {
    0% {
        opacity: 0;
        transform: rotateY(70deg);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        offset: 1
    }
}

@-webkit-keyframes rotate-spread-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: rotateY(70deg);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: rotateY(0deg);
        -webkit-offset: 1
    }
}

@-moz-keyframes rotate-spread-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: rotateY(70deg);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: rotateY(0deg);
        -moz-offset: 1
    }
}

@-o-keyframes rotate-spread-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: rotateY(70deg);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: rotateY(0deg);
        -o-offset: 1
    }
}

@-ms-keyframes rotate-spread-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: rotateY(70deg);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: rotateY(0deg);
        -ms-offset: 1
    }
}

/*位移*/
/*左边进入*/
.translateLeft {
    animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: left-enter-keyframes 2000ms ease 0ms 1 forwards;
}

@keyframes left-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
        offset: 1
    }
}

@-moz-keyframes left-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateX(-100%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateX(0%);
        -moz-offset: 1
    }
}

@-webkit-keyframes left-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateX(-100%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateX(0%);
        -webkit-offset: 1
    }
}

@-o-keyframes left-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateX(-100%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateX(0%);
        -o-offset: 1
    }
}

@-ms-keyframes left-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateX(-100%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateX(0%);
        -ms-offset: 1
    }
}

/*右边进入*/
.translateRight {
    animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
    -moz-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
    -webkit-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
    -o-animation: right-enter-keyframes 2000ms ease 0ms 1 forwards;
}

@keyframes right-enter-keyframes {
    0% {
        opacity: 0;
        transform: translateX(100%);
        offset: 0
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
        offset: 1
    }
}

@-moz-keyframes right-enter-keyframes {
    0% {
        -moz-opacity: 0;
        -moz-transform: translateX(100%);
        -moz-offset: 0
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: translateX(0%);
        -moz-offset: 1
    }
}

@-webkit-keyframes right-enter-keyframes {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: translateX(100%);
        -webkit-offset: 0
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: translateX(0%);
        -webkit-offset: 1
    }
}

@-o-keyframes right-enter-keyframes {
    0% {
        -o-opacity: 0;
        -o-transform: translateX(100%);
        -o-offset: 0
    }
    100% {
        -o-opacity: 1;
        -o-transform: translateX(0%);
        -o-offset: 1
    }
}

@-ms-keyframes right-enter-keyframes {
    0% {
        -ms-opacity: 0;
        -ms-transform: translateX(100%);
        -ms-offset: 0
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: translateX(0%);
        -ms-offset: 1
    }
}

/*左右摆动*/
@keyframes mylogo {
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

@-moz-keyframes mylogo /* Firefox */
{
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

@-webkit-keyframes mylogo /* Safari 和 Chrome */
{
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

@-o-keyframes mylogo /* Opera */
{
    from {
        left: 5px;
    }
    to {
        left: -5px;
    }
}

.imagelogo {
    background: url(images/logo.png) no-repeat;
    float: left;
    position:relative;
     180px;
    height: 60px;
    margin: 15px 0px 0px 0px;
    padding: 0px;
    cursor: pointer;
    animation: mylogo 1s linear 0s infinite alternate;
    /* Firefox: */
    -moz-animation: mylogo 1s linear 0s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: mylogo 1s linear 0s infinite alternate;
    /* Opera: */
    -o-animation: mylogo 1s linear 0s infinite alternate;
}
/*由大变小*/

.avatar{

    display: block;
    100%;
    animation: avatar 2000ms ease 0ms 1 forwards;
    -moz-animation:avatar 2000ms ease 0ms 1 forwards;
    -webkit-animation:avatar 2000ms ease 0ms 1 forwards;
    -o-animation:avatar 2000ms ease 0ms 1 forwards;
}
@-webkit-keyframes avatar {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: scale(1.3)
    }
    100% {
        -webkit-opacity: 1;
        -webkit-transform: scale(1)
    }
}


@-moz-keyframes avatar {
    0% {
        -moz-opacity: 0;
        -moz-transform: scale(1.3)
    }
    100% {
        -moz-opacity: 1;
        -moz-transform: scale(1)
    }
}
@-ms-keyframes avatar {
    0% {
        -ms-opacity: 0;
        -ms-transform: scale(1.3)
    }
    100% {
        -ms-opacity: 1;
        -ms-transform: scale(1)
    }
}
@-o-keyframes avatar {
    0% {
        -o-opacity: 0;
        -o-transform: scale(1.3)
    }
    100% {
        -o-opacity: 1;
        -o-transform: scale(1)
    }
}
@keyframes avatar {
    0% {
        opacity: 0;
        transform: scale(1.3)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}