css动画

过渡（

transition）[træn'si ʒ ən]

-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡

-需要在某种条件下触发，例如hover、active、focus情况下

-⼀次性的效果，不能循环，只能做简单的动画

-只有两帧，设置动画初始值和结束值

-IE10开始兼容，移动端兼容良好

动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发，

例如hover，acitve时，动画可以⾃动触发动画

制定关键帧⽤的是@keyframes属性，指定关键帧主要有两种⽅法：

⽅法⼀：

@keyframes 关键帧名称{

from{初始状态属性}

to{结束状态属性}}

⽅法⼆：

@keyframes 关键帧名称{

0%{初始状态属性}

50%（中间还可以再添加关键帧）

100%{结束状态属性}

translate( 参数1，参数2 ) 属性值 1 是指在 x 轴上移动的距离 , 正值，元素向右移动，负值向左移动，属性

值 2 是指在 y 轴上移动的距离，正值向下，负值向上，参数 2 默认为 0

translateX()沿着x轴⽅向平移

translateY()沿着y轴⽅向平移

translateZ()沿着z轴⽅向平移 结合视距起作⽤. 不能是百分⽐数值（ 3d 变化）

注意：

1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于 ⾃身计算 的, x 轴往右为正， y 轴往下为正，反之

为负

2 、位移的参考原点是元素的左上⻆

3 、如果是通过 active 进⾏位移，执⾏完毕后会还原

4 、 不会影响别的元素

5 、对于⾏内元素是没有效果的

反之如果这个值为负值，元素对原点中⼼进⾏逆时针旋转。

rotateX() ，指元素围绕其 X 轴以设定的度数进⾏旋转

变形不会影响到⻚⾯的布局(只折腾⾃⼰)

尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯

可选值：

3.1 位移 transform: translate()

1 // 垂直⽔平居中的效果

2 position : absolute ;

3 left : 50% ;

4 top : 50% ;

5 transform : translate ( -50% , -50% );

6 /* transform: translateX(-50%) translateY(-50%); */

3.2 旋转 transform: rotate();

默认情况下是绕着中⼼点进⾏转动的；

默认的单位是deg，⽐如rotate（

45deg）

如果这个值为正值，则是元素对原点中⼼顺时针旋转；

可以单独对x轴y轴z轴进⾏设置：这⾥的X/Y/Z也是是需要⼤写的。

1.

2.

3.

4. rotateY() ，元素围绕其 Y 轴以设定的度数进⾏旋转

rotateZ() , 元素围绕其 Y 轴以设定的度数进⾏旋转

只有⼀个值的时候第⼆个值和第⼀个值是相等的；

两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

transform:scaleX(); 元素只在 x 轴上缩放元素

transform:scaleY(); 元素只在 y 轴上缩放元素

x值：为正则向左变形，为负则向右变形

y值：为正则向上变形，为负则向下变形

以上是以左上⻆为参照向左向右，向上，向下变形

transform:skewX() ；

transform:skewY()；

transform-origin:（⽔平⽅向 垂直⽅向），默认值 transform-origin:（

center center）

值可以为⽅向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值

3.3 缩放transform:scale()

缩放属性是让元素根据中⼼原点对对象进⾏缩放。

默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素变

得更⼤。

缩放属性的属性值和位移属性的属性值是类似的语法，可以是⼀个值，也可以有两个属性值：

单独对x轴y轴进⾏设置：同样这⾥的X/Y/Z也是是需要⼤写的。

也不会影响其他盒⼦

3.4 倾斜transform:skew()

倾斜skew()是指通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。

⼀个参数时：表示x轴的倾斜x⻆度,y轴默认为0；

两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。

变形的单位是deg

可单独对x轴y轴进⾏设置：这⾥的X/Y也是是需要⼤写的。