为使元素由大到小或由小到大的变化，通常使用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了。