CFXIXI工作室首页
CF西西的博客 | css3如何制作左右滑动的动画

css3如何制作左右滑动的动画

25. 十一月 2016
1.Javascript调用方法:(对元素添加动画class)
$(this).addClass("fadeOutLeft"); $(this).next().addClass("fadeInRight show");

2.定义css3 动画
.fadeInRight {
    -webkit-animation:fadeInRight 1s ease-in-out;
    -moz-animation:fadeInRight 1s ease-in-out;
    -ms-animation:fadeInRight 1s ease-in-out;
    animation:fadeInRight 1s ease-in-out
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translate(100%,0)
    }
    100% {
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:none
    }
}

.fadeInLeft{
    -webkit-animation:fadeInLeft 1s ease-in-out;
    -moz-animation:fadeInLeft 1s ease-in-out;
    -ms-animation:fadeInLeft 1s ease-in-out;
    animation:fadeInLeft 1s ease-in-out
}
@-webkit-keyframes fadeInLeft{
    0% {
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translate3d(-100%,0,0)
    }
    100% {
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:none
    }
}

.fadeOutLeft {
    -webkit-animation:fadeOutLeft 1s ease-in-out;
    -moz-animation:fadeOutLeft 1s ease-in-out;
    -ms-animation:fadeOutLeft 1s ease-in-out;
    animation:fadeOutLeft 1s ease-in-out
}
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity:1;
        filter:alpha(opacity=100)
    }
    100% {
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translate3d(-100%,0,0)
    }
}

.fadeOutRight {
    -webkit-animation:fadeOutRight 1s ease-in-out;
    animation:fadeOutRight 1s ease-in-out;
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity:1;
        filter:alpha(opacity=100)
    }
    100% {
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translate3d(100%,0,0)
    }
}

3.监听动画完成后隐藏元素
$(this).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ })

 

css3