小程序CSS常用动画示例

小程序CSS常用动画示例

一、前言

正如android的四大动画一样：

• translate:移动

• alpha:透明度变化

• rotate:旋转

• scale:尺寸变化

css也可以实现

二、CSS3的2D转换

2dtransform的方法:

我们能够对元素进行移动、缩放、转动、拉长或拉伸

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。