CSS3过渡效果

先记住几个属性

transform:translate(x,y);//平移,x代表向又移动距离，y代表向下移动距离

transform:scale(x,y);//缩放，x代表水平缩放倍数，y代表垂直缩放倍数

transform:rotate(x);//旋转，x代表顺时针旋转多少度，如rotate(10deg)

transform:skew(x,y);//倾斜，x\y分别代表沿x轴和y轴的倾斜

 

动画过渡

transition-property列出元素应该过渡的CSS属性，可过度属性包括背景、边框和方框模型属性。

transition-duration设置过渡持续时间

transition-timing-function设置过渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一

transition-delay动画延时时间

 

缩写形式

#selector{transition:transform 0.2s ease}

值的顺序必须为以下顺序：

 

    transition-property

    transition-duration

    transition-function

    transition-delay

 

来源：oschina

链接：https://my.oschina.net/u/1417422/blog/616733