animation

Posted 2020-08-24

animation-name
animation-duration/*持续时间*/
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out
animation-delay /*延迟时间*/
animation-iteration-count
animation-direction :normal | altenate
animation-fill-mode: none | forwards /*当动画完成后，保持最后一个属性值*/| backwards | both
animation-play-state: paused|running
 
.in {
    z-index:999;
    display: block;
    -webkit-animation: in-charlie .75s ease-out forwards .25s;
    -moz-animation: in-charlie .75s ease-out forwards .25s;
    -o-animation: in-charlie .75s ease-out forwards .25s;
    animation: in-charlie .75s ease-out forwards .25s;
    opacity: 0;
}
@-webkit-keyframes in-charlie {
    0% {
        -webkit-transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-moz-keyframes in-charlie {
    0% {
        -moz-transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -moz-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-o-keyframes in-charlie {
    0% {
        -o-transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -o-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes in-charlie {
    0% {
        -webkit-transform: translate3d(0, 150px, 0);
        -moz-transform: translate3d(0, 150px, 0);
        -o-transform: translate3d(0, 150px, 0);
        transform: translate3d(0, 150px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}