CSS3动画总结

SCC3动画-2D转换

1. translate()方法（平移）

1. 根据左（x轴）和顶部（Y轴）位置给定的参数，从当前位置移动。

translate()方法可以写一个参数，例如translate(x) => x>0 水平向右平移，x<0水平向左平移，x=0位置不变

translate()方法也可以写两个参数，例如translate(x,y) => x为正，y为负 右下平移 反之。。。

translateX()方法，translateY()方法  **参数值的单位为px**

2. scale()方法（缩放

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

一个参数的时候控制水平方向加垂直方向的缩放比例 例如：scale(a)  

a>1为放大， 0<a<1 为缩小  , a=0 元素消失，但是不会删除元素 ，a = 1不变，a<0 变为镜像显示。

scale()也可以传两个参数，两个值:a 水平  b 垂直 

scaleX()方法，scaleY()方法
注意：参数值没有单位，纯数字

3. rotate()方法（旋转）

1. 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

rotate()方法如果没有配合基点（transform-origin）使用 则围绕原点/中心点旋转

transform-origin变化旋转基点 值：关键字top、left、right、bottom、center，百分， 数字。

rotateX()方法，rotateY()方法

**注意：参数的单位为deg**

4. skew()方法（倾斜）

一个参数：水平方向的拉伸。两个参数：水平方向的拉伸，垂直方向的拉伸

 **注意：为负值，代表反向拉伸 参数的单位deg**

保持某一方向不变： 1.可以设置该方向为0     2.skewY/skewX 设置

**以上四个方法都属于transform的值 可以简写 例如：transform : translate()  scale()  rotate()  skew()**

过度动画 transition属性

• transition-property : 设置过渡动画生效的对应css样式属性 all为全部属性值
• transition-duration : 动画变化的持续时间 单位为s
• transition-delay : 动画变化的延迟时间 单位为s
• transition-timing-function :动画速度曲线 例如：cubic-bezier(.18,.83,1,.2)
  简写 transition: all 2s 5s cubic-bezier(.18,.83,1,.2)

补充：transition-timing-function : steps(5, jump-both) 参数1：弹跳次数，参数2：弹跳方式

过度动画animation属性

• animation-name：指定要调用的属性名
• animation-duration：动画持续时间
• animation-delay ：动画变化的延迟时间
• animation-timing-function：动画速度曲线
• animation-fill-mode：控制最终显示的帧的位置 （both 最后一帧+初始帧，forwards 最后一帧，backwards 保留第一帧）
• animation-iteration-count ：指定动画演示的次数（infinite 无限循环）
• animation-play-state 用于js控制动画的暂停与播放（running 播放， paused 暂停）
• animation-direction：控制动画的执行方向，一般设置在多次动画实现中（ transform: translateX(100px)交替反向运， reverse 反向）

第一种方式： @keyframes  名字{

from{//最初帧显示的样式}

to{//最终变化到的帧显示的样式}

}  

第二种方式：@keyframes 名字{

0%{}

50%{}

100%{}

}

animation 简写形式

animation: gmrun1 10s 1s linear 1 reverse forwards

transition属性和animation属性的区别

animation过渡动画只要页面加载完成，就会触发效果
transition过渡动画必须要有操作才会触发过渡动画效果

CSS3动画-3D转换

3D变化要求：必须要有父容器，并且父容器需要构造一个3D空间 transfoem-style

第一步 构造3D空间 ：transform-style = preserve-3d

第二步 构造景深 ： perspective

第三步 设置观察立体图形的角度 ：perspective-origin