CSS3中使用transform开发动画效果

假设我们想实现一个向上滑动的效果

.slideup.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfrombottom;
    -webkit-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfrombottom;
    animation-duration: 250ms;
}

@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}

第一步：定义动画结果

transform: translateY(0);

第二步：定义动画过程名

animation-name: slideinfrombottom;

第三步：实现动画过程

@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}

第四步：定义动画时间

animation-duration: 250ms;

最后再调用JS方法元素上附加动画所对应的class

$(".aaa").addClass("slideup").addClass("in");

如此便可见向上浮动效果