动画效果 出不来

来源:2-6 导航页背影动画制作(animation与transition区别)

米西米西

2018-01-22 16:00

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

}

}


写回答 关注

1回答

  • _轻描淡写_
    2018-01-23 14:26:04
    已采纳

    keyframes 拼错啦

    米西米西

    非常感谢!

    2018-01-23 17:24:56

    共 1 条回复 >

css3实现网页平滑过渡效果

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

54371 学习 · 372 问题

查看课程

相似问题