为使元素由大到小或由小到大的变化，通常使用css3 的 scale缩放属性。
如，将一元素先放大倍数然后缩小，最后正常大小显示，css代码如下：
@-webkit-keyframes change{
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(2);
-webkit-transform: translate(-50%, -50%) scale(2);
}
70% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.8);
-webkit-transform: translate(-50%, -50%) scale(0.8);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
}
@-moz-keyframes change{
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(2);
-webkit-transform: translate(-50%, -50%) scale(2);
}
70% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.8);
-webkit-transform: translate(-50%, -50%) scale(0.8);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
}
其中，开始时opacity为0，开始变化时，如果该元素在父容器里显示不完全，火狐下动画效果依然能正常表现，但webkit内核下的浏览器会有bug
表现为，运动过程中只看到该元素显示在父容器的部分，等动画结束后才显示全部。
解决办法为，开始时候让该元素的内容全部显示就OK了。