h2 效果出不来

来源:2-7 导航页背影动画制作(animation制作动画)

慕UI2890912

2017-08-08 14:51

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

}


写回答 关注

1回答

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

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

css3实现网页平滑过渡效果

CSS3 打造页面之间的平滑过渡效果,带来神奇的体验

54371 学习 · 372 问题

查看课程

相似问题