auv
2015-05-13 18:14
/* 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{
/*transition 需要事件触发*/
/*animation 不需要事件触发*/
-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.2 backwards;
}
@-webkit-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
@keyframes moveDown{
0%{
-webkit-transform:translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform:translateY(0px);
opacity: 1;
}
}
哪里有误? Moz没h2 p标签的碰撞效果啊 - -|
@-xx-keyframes moveDown里面的-xx-transform:translateY的前缀都没改
css3实现网页平滑过渡效果
54371 学习 · 372 问题
相似问题