.transited{
    transition:.3s;
    -webkit-transform: translateZ(0);
}
.animated{

}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50%);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

.fadeInUp {
    opacity: 1;
    -webkit-animation-name: fadeInUp;
}
 
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50%);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}


.fadeInRight {
    -webkit-animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}
.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
}

/*首页信息流更新动画*/
.newItem{
    transition: all 1s ease;
}/*
.info-animated{
    height: 0;
    opacity: 0;
}*/

.transitioned{
    transition: 1s;
}