css3动画效果模板

一、keyframes模板

/*张合*/
@keyframes open-close {
   
    0%, 10% {
   
        -webkit-transform: scaleY(0);
        -moz-transform: scaleY(0);
        transform: scaleY(0)
    }
    25% {
   
        -webkit-transform: scaleY(1.2);
        -moz-transform: scaleY(1.2);
        transform: scaleY(1.2)
    }
    100%, 30% {
   
        -webkit-transform: none;
        -moz-transform: none;
        transform: none
    }
}

/*显现*/
@keyframes show {
   
    0%, 10% {
   
        opacity: 0
    }
    100%, 50% {
   
        opacity: 1
    }
}

/*淡入淡出*/
@keyframes in-out {
   
    0%, 30% {
   
        -webkit-transform: scale(0) translateX(0) translateY(0);
        -moz-transform: scale(0) translateX(0) translateY(0);
        transform: scale(0) translateX(0) translateY(0)
    }
    100%, 80% {
   
        -webkit-transform: none;
        -moz-transform: none;
        transform: none
    }
}

/*左右移动*/
@keyframes left-right {
   
    0%, 10% {
   
        opacity: 0;
        -webkit-transform: scale(1) translateX(-5px)