写多了#st-scrol

你要看一下你之前设置的页面切换动画的时间是多少。设置这个的延迟，是因为页面切换本身需要时间，如果你这里边的动画太快，那么页面切换完成之前就已经完成了，就相当于看不到你这个<h2>的动画了

自己发现了 ，多了个逗号啊。。。。。。

你的position写错了

1.

#st-control-2:checked ~.st-sctoll #st-panel-1 h2{ }选择不生效

视频是

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,

你的写的是st-sctoll  其实是st-scroll  看下你html取的什么class

那你看看你写个结构是否正确？

可以把动画时间延长看看，一开始我也看不出来，时间短不明显

分别选择

前面的1234...

因为只要checked 选中的状态下  

比如html的所有标签：块级啊行级啊或者inline-block啊都可以看做是一个盒模型，也就是可以加border设置margin和padding这些；

但是有些效果不是全局属性，只能加在块标签或者行标签上；

这两个东西要区分开。

不然会栽坑栽的亲妈都认不出来，别问我怎么知道的

backface-visibility属性值有visible 背面可见 hidden背面不可见两种，而backface-visibility属性和3D transform效果相关，而transform:translate3d(0,0,0)被设置时，为了背面不可见故设置了backface-visibility;

@符号后面写成-webkit-,-moz-,-ms-之后，大括号里面的也应该写成一样的，你的全是-webkit-

http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp  这里有答案

检查一下发现那个html中的div中的st-panel-5里多加了一个n。类似全部多了一个n。去掉就好了

#st-control-1:checked ~.st-scroll #st-panel-1 h2,

#st-control-2:checked ~.st-scroll #st-panel-2 h2,

#st-control-3:checked ~.st-scroll #st-panel-3 h2,

#st-control-4:checked ~.st-scroll #st-panel-4 h2,

#st-control-5:checked ~.st-scroll #st-panel-5 h2{

-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;

animation:moveDown 0.6s ease-in-out 0.2s backwards;

text-shadow:1px 1px 1px rgba(151,24,64,0.2);

}

@-webkit-keyframes moveDown{

0%{

-webkit-transform:translateY(-40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-moz-keyframes moveDown{

0%{

-moz-transform:translateY(-40px);

opacity:0;

}

100%{

-moz-transform:translateY(0px);

opacity: 1;

}

}

@-ms-keyframes moveDown{

0%{

-webkit-transform:translateY(-40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-o-keyframes moveDown{

0%{

-o-transform:translateY(-40px);

opacity:0;

}

100%{

-o-transform:translateY(0px);

opacity: 1;

}

}

@keyframes moveDown{

0%{

transform:translateY(-40px);

opacity:0;

}

100%{

transform:translateY(0px);

opacity: 1;

}

}

.st-panel p{

position:absolute;

width:90%;

left:5%;

top:50%;

font-size:16px;

padding: 0;

text-align: center;

-webkit-backface-visibility:hidden;

color:#8b8b8b;

margin-top: 10px;

}

#st-control-1:checked ~.st-scroll #st-panel-1 p,

#st-control-2:checked ~.st-scroll #st-panel-2 p,

#st-control-3:checked ~.st-scroll #st-panel-3 p,

#st-control-4:checked ~.st-scroll #st-panel-4 p,

#st-control-5:checked ~.st-scroll #st-panel-5 p{

-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;

animation:moveUp 0.6s ease-in-out 0.2s backwards;

}

@-webkit-keyframes moveUp{

0%{

-webkit-transform:translateY(40px);

opacity:0;

}

100%{

-webkit-transform:translateY(0px);

opacity: 1;

}

}

@-moz-keyframes moveUp{

0%{

-moz-transform:translateY(40px);

opacity:0;

}

100%{

-moz-transform:translateY(0px);

opacity: 1;

}

}

@-ms-keyframes moveUp{

0%{

-ms-transform:translateY(40px);

opacity:0;

}

100%{

-ms-transform:translateY(0px);

opacity: 1;

}

}

@-o-keyframes moveUp{

0%{

-o-transform:translateY(40px);

opacity:0;

}

100%{

-o-transform:translateY(0px);

opacity: 1;

}

}

@keyframes moveUp{

0%{

transform:translateY(40px);

opacity:0;

}

100%{

transform:translateY(0px);

opacity: 1;

}

}