h2的动画效果一直做不出来有哪位大神能提供一下代码吗谢谢-慕课网

首页课程实战体系课手记专栏慕课教程

h2的动画效果一直做不出来有哪位大神能提供一下代码吗谢谢

来源：2-7 导航页背影动画制作（animation制作动画）

瞎猫小弟弟

2015-04-29 12:01

h2的动画效果一直做不出来有哪位大神能提供一下代码吗谢谢

写回答关注

6回答

菜鸟要升级

2015-06-23 13:36:06

已采纳

#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;
-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
animation:moveDown 0.6s ease-in-out 0.2s backwards;
text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
@-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;
}
}
@-ms-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveDown{
0%{
-o-transform:translateY(-40px);
opacity:0;
}
100%{
-o-transform:translateY(0px);
opacity: 1;
}
}
@keyframes moveDown{
0%{
transform:translateY(-40px);
opacity:0;
}
100%{
transform:translateY(0px);
opacity: 1;
}
}
.st-panel p{
position:absolute;
width:90%;
left:5%;
top:50%;
font-size:16px;
padding: 0;
text-align: center;
-webkit-backface-visibility:hidden;
color:#8b8b8b;
margin-top: 10px;
}

#st-control-1:checked ~.st-scroll #st-panel-1 p,
#st-control-2:checked ~.st-scroll #st-panel-2 p,
#st-control-3:checked ~.st-scroll #st-panel-3 p,
#st-control-4:checked ~.st-scroll #st-panel-4 p,
#st-control-5:checked ~.st-scroll #st-panel-5 p{
-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
animation:moveUp 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
0%{
-webkit-transform:translateY(40px);
opacity:0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveUp{
0%{
-moz-transform:translateY(40px);
opacity:0;
}
100%{
-moz-transform:translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveUp{
0%{
-ms-transform:translateY(40px);
opacity:0;
}
100%{
-ms-transform:translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveUp{
0%{
-o-transform:translateY(40px);
opacity:0;
}
100%{
-o-transform:translateY(0px);
opacity: 1;
}
}
@keyframes moveUp{
0%{
transform:translateY(40px);
opacity:0;
}
100%{
transform:translateY(0px);
opacity: 1;
}
}

0 0
qq_云破月来_03319603

2016-06-30 19:59:32

去掉backwards后动画就出来了

0 0
proto

2015-09-14 19:04:49

页面滑动效果就是卡了好久才发现bug的
这个效果又卡住了。。。。这次都不知道什么问题。。。
已疯

0 0

宇在路上: 2015-05-12 21:35:24

#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:moveDo 1s ease-in-out 0.5s backwards;
    -moz-animation:moveDo 1s ease-in-out 0.5s backwards;
    -ms-animation:moveDo 1s ease-in-out 0.5s backwards;
    -o-animation:moveDo 1s ease-in-out 0.5s backwards;
    animation:moveDo 1s ease-in-out 0.5s backwards;


}
@-webkit-keyframes moveDo{
    0%{
        -webkit-transform: translateY(-40px);
        opacity:0 ;
    }
    100%{
        -webkit-transform:translateY(0px);
        opacity:1 ;
    }

}

0 0