                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

无法实现切换

#st-control-1:checked ~ .st-scroll{-webkit-transform: translateY(0%);

-moz-transform: translateY(0%);

-o-transform: translateY(0%);

-ms-transform: translateY(0%);

transform: translateY(0%);

}

#st-control-2:checked ~ .st-scroll{-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

-o-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

}

这个代码没有问题，却无法实现切换，求解

KIKI_思

2016-04-18

源自：css3实现网页平滑过渡效果 2-3

关注问题我要回答

1097

操作

收起

2 回答

XuanKong
2017-02-10

我测试了一下，当设为3s时明显感觉有缓冲，3s以下感觉还是很快，看不出明显的缓冲效果，至少我的是这样，

.st-scroll{
    left:0;
    top:0;
    /*css-3d*/
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -webkit-backface-visibility:hidden;
    /*过渡 */
    transition:transform 2s ease-in-out;
    -webkit-transition:transform 2s ease-in-out;
    -ms-transition:transform 2s ease-in-out;
    -moz-transition:transforms 2s ease-in-out;
    -o-transition:transform 2s ease-in-out;
    }