h2 效果出不来
#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;/*不需要事件触发,transition需要事件触发*/
-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards/*动画播放之前处于开始状态*/;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 0.6s ease-in-out 0.2s backwards;
}
@-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;}
}
@-o-keyframes moveDown{
0%{-o-transform:translateY(-40px);
opacity:0;}
100%{-o-transform:translateY(0px);
opacity:1;}
}
@-ms-keyframes moveDown{
0%{-ms-transform:translateY(-40px);
opacity:0;}
100%{-ms-transform:translateY(0px);
opacity:1;}
}
@keyframes moveDown{
0%{transform:translateY(-40px);
opacity:0;}
100%{transform:translateY(0px);
opacity:1;}
}