问答详情
源自:2-7 导航页背影动画制作(animation制作动画)

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;}

}


提问者:慕UI2890912 2017-08-08 14:51

个回答

  • 慕UI2890912
    2017-08-08 15:06:56

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