css3动画

transform

功能：向元素应用2D或3D转换
语法：transform:none|transform-functions
参数：
translate3d(x,y,z)定义3D转化
rotate3d(x,y,z,angle)定义3D旋转
scale3d(x,y,z,flex)定义3D缩放

transform-origion

transition

功能：在一定的时间区间内平滑地过渡指定的属性值。
语法：transform:property duration timing-function delay;
参数：
propert规定设置过渡效果的css属性的名称
duration规定完成过渡效果需要多少秒或毫秒
timing-function规定速度效果的速度曲线
delay定义过渡效果何时开始

Examples

.tooltip-effect-1 .tooltip-content {
    -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); /*rotate3d前三个参数[0,1]*/
    transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg); /* translateX, translateY, translateZ*/
    -webkit-transform-origin: 50% 100%; /*只有定义了transform才。。。*/
    transform-origin: 50% 100%; /*等价center bottom*/
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; /*过渡时，多个属性逗号分隔*/
    transition: opacity 0.3s, transform 0.3s;
}