动画知识点需要注意得几点？？？？

前言：

1 、   什么是css动画：使用css技术来控制页面元素css属性的变化

2 、css动画优势：不需要用js也能写，  比较流畅，  由浏览器去执行动画，  减少代码量，性能比较高

3 、⼀般兼容到ie10以上浏览器  ( ⼀般没太大问题)

1、过渡

1.1.过渡的理解

过渡  (transition)  [træn'si3ən]

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

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

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

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

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

1.2.过渡的4个属性

序号	属性	意义	备注
1	transition-property ['prɔpəti]	哪些属性要过渡  ( 选 填)	none  没有属性获得过 渡效果    all     所有属性都参与 过渡   默认值    property   自定义应用 过渡效果，⼀个或多 个，  用逗号隔开 注意： 1 、所有数值类型的 属性，都可以参与过  渡，  比如width 、        height 、left 、top 、   border-radius 、        opacity等 2 、从⼀个有效数值 向另⼀个有效数值进行 过渡
2	transition-duration [djuə'reiʃən]	指定过渡效果的持续时 间  ( 必填)	时间的单位：s和ms 1s=1000ms

3	transition-timing- function	过渡变化曲线  ( 缓动效 果)    ( 选填)	*ease  [i:z] 默认值，  慢速开始，  先加速，然 后再减速 *linear 匀速运动 ease-in  先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out  以慢速开 始和结束的过渡效果 *steps()分布执行过渡 效果 cubic-bezier(n,n,n,n) 立方贝塞尔曲线函数， 值是0-1之间的数值
4	transition-delay	过渡效果的延迟，  等待 ⼀段时间后执行过渡 ( 选填)	时间的单位：s和ms 1s=1000ms
5	transition	同时设置过渡相关的所 有属性  ( 选填)	只有⼀个要求，  如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，  第二个 写延迟时间

2、动画

2.1动画的理解

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

第⼀步：先要设置⼀个关键帧，关键帧设置了动画每⼀个步骤

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

方法⼀：

@keyframes 关键帧名称{

from{初始状态属性}

to{结束状态属性}}

方法二：

@keyframes 关键帧名称{

0%{初始状态属性}

50%  ( 中间还可以再添加关键帧)

100%{结束状态属性}

注意：

1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写，   默认也是原始设置

2、可以同时设置关键帧，用逗号  ( ,)  隔开就行

1	@keyframes text {
2	/* from表示动画开始位置    也可以使用0%*/
3	from {
4	margin-left: 0;
5	}
6	/* to动画的结束位置  也可以使用100%*/
7	to {
8	margin-left: 500px;

第二步  调用关键帧

2.2动画属性

序号	属性	意义	备注
1	animation-name	绑定到选择器的关键帧 的名称，  告诉系统需要 执行哪个动画(必填)	设置动画的名字，  和   @keyframs相对应，  可 以设置多个动画， 逗号隔开，应用多个 动画
2	animation-duration	动画的完成时间，告诉 系统动画持续的时长 (必填)	时间单位：s   ms
3	animation-timing- function	设置动画如何完成一个 周期，告诉系统动画执 行的速度(与过度动画 类型)	*ease  [i:z] 默认值，  慢速开始，  先加速，然 后再减速 *linear 匀速运动 ease-in  先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out  以慢速开 始和结束的过渡效果 *steps()分布执行过渡 效果

			cubic-bezier(n,n,n,n) 立方贝塞尔曲线函数， 值是0-1之间的数值
4	animation-delay	动画在启动前的延迟间 隔
5	count	动画的播放次数，告诉 系统动画需要执行几次	n 定义动画播放n         次                                 infinite无限次往返执行
	,
6	animation-direction	指定是否应给轮流反向 播放动画	normal  默认值：   从    from向to运行，每次都是 这样 reverse  从to到from运 行，每次都是这样 * alternate  从from向to运 行，  重复执行动画时反向执 行 alternate-reverse  从to 向from运行，  重复执行动  画时反向执行
7	animation-ill-mode	规定当动画不播放时    (完成时，延时未开始 播放时)，应用到的元 素样式	none默认值 动画执行完毕 元素回到原来的位置 * forwards 动画执行完     毕，会停止在动画结束的位 置 backwards 动画延时等待 时，元素就会处于开始位置 both 结合了forwards和 ackwards的特点
8	animation-play-state	告诉系统当前动画是否 需要暂停	running 默认值  动画执 行 paused  动画暂停
9	animation	简写，  可以写以上任意 属性的可选值	animation:关键帧的名 称  动画持续的时间  运 动状态(linear(匀速))  动 画延迟的时间  动画的循 环次数  动画的运动方式 (设置正向或者反向)

3、变形2D

变形属性transform：

  变形不会影响到页面的布局(只折腾自己)

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

  可选值：

位移—translate()

缩放—scale()

旋转—rotate()

倾斜—skew()

3.1 位移 transform: translate()

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

translateX()沿着x轴方向平移

translateY()沿着y轴方向平移

translateZ()沿着z轴方向平移 结合视距起作用.不能是百分比数值  (3d变化)

注意：

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

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

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

4 、   不会影响别的元素

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

1	//垂直水平居中的效果
2 3 4 5	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
6	/* transform: translateX(-50%) translateY(-50%); */

3.2 旋转  transform: rotate();

1. 默认情况下是绕着中心点进行转动的；

2. 默认的单位是deg，  比如rotate  (45deg)

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

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

4. 可以单独对x轴y轴z轴进行设置：这里的X/Y/Z也是是需要大写的。

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