动画效果 出不来
#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 1.6s ease-in-out 1s backwards;
-moz-animation: moveDown 1.6s ease-in-out 1s backwards;
-o-animation: moveDown 1.6s ease-in-out 1s backwards;
-ms-animation: moveDown 1.6s ease-in-out 1s backwards;
animation: moveDown 1.6s ease-in-out 1s backwards;
}
@-webkit-keyfarmes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-moz-keyfarmes moveDown{
0%{
-moz-transform:translateY(-40px);
opacity: 0;
}
100%{
-moz-transform:translateY(0px);
opacity: 1;
}
}
@-o-keyfarmes moveDown{
0%{
-o-transform:translateY(-40px);
opacity: 0;
}
100%{
-o-transform:translateY(0px);
opacity: 1;
}
}
@-ms-keyfarmes moveDown{
0%{
-ms-transform:translateY(-40px);
opacity: 0;
}
100%{
-ms-transform:translateY(0px);
opacity: 1;
}
}
@keyfarmes moveDown{
0%{
transform: translateY(-40px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
