CSS动画

CSS动画

1．2D转换
translate()根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate()在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX();表示只在X轴(水平方向)倾斜。skewY();表示只在Y轴(垂直方向)倾斜。
matrix() matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
2．3D转换
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。
Perspective规定 3D 元素的透视效果。
perspective-origin规定 3D 元素的底部位置。
3．过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个种样式的时候，无需使用Flash动画或JavaScript
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。

4．Animation动画

CSS3 @keyframes 规则
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画后，需要把它绑定到一个选择器上，否则动画将不会有任何效果。
指定至少以下这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
规定时长①from to规定②百分比规定