目录
一、过渡
1、过渡（transition）的理解
2、过渡属性
2.1、transition-property
2.2、transition-duration
2.3、transition-timing-function
2.4、transition-delay
2.5、transition
二、动画
1、动画的理解
2、设置动画
第一步：设置关键帧:设置元素的行动轨迹
方法一：
方法二：
第二步、调用关键帧
1、animation-name
2、animation-duration
3、animation-timing-function
4、animation-delay
5、animation-iteration-count
6、animation-direction
7、animation-fill-mode
8、animation-play-state
9、animation
三、变形（2d）
1、变形的理解
2、transform:translate()
3、transform:rotate()
4、transform:scale
5、transform:skew
6、变形原点（transform-origin）
css动画：使用css技术来控制页面元素css属性的变化。
一、过渡
1、过渡（transition）的理解
通过过渡可以指定一个属性发生变化时的切换方式，平滑的过渡
需要在某种条件下触发，例如hover、active、focus情况下
一次性的效果，不能循环，只能做简单的动画
只有两帧，设置动画初始值和结束值
IE10开始兼容，移动端兼容良好
2、过渡属性
2.1、transition-property
设置哪些属性要过渡，默认值是all
属性值：none 没有属性获得获得过渡效果
all 所有属性获得过渡效果
property 自定义应用过渡效果，一个或多个用 , 隔开
注意：
1、所有数值类型的属性，都可以参与过渡，
比如width、height、left、top、border-radius、opacity,颜色等。（display：none等不可以）
2、从一个有效数值向另一个有效数值进行过渡
2.2、transition-duration
设置过渡效果的持续时间（必填）
时间的单位：s和ms 1s=1000ms
2.3、transition-timing-function
设置过渡变化曲线（缓动效果）
ease 默认值，慢速开始，先加速，然后再减速
linear 匀速运动
ease-in 先慢后快 加速运动
ease-out 先快后慢 减速运动
ease-in-out 以慢速开始和结束的过渡效果
steps()分布执行过渡效果
cubic-bezier(n,n,n,n)立方贝塞尔曲线函数，值是0-1之间的数值（以上运动都为其特殊值）
<ul> <li style="transition-timing-function: ease">box1</li> <li style="transition-timing-function: linear">box2</li> <li style="transition-timing-function: ease-in">box3</li> <li style="transition-timing-function: ease-out">box4</li> <li style="transition-timing-function: ease-in-out">box5</li> <li style="transition-timing-function: steps(4)">box6</li> </ul>2.4、transition-delay
过渡效果的延迟（等待时间）
时间的单位：s和ms 1s=1000ms 默认是0
2.5、transition
同时设置过渡相关的所有属性（选填，过渡时间是必写）
只有一个要求，如果要写延迟，则两个时间中, 第一个写过渡时间，第二个写延迟时间
空格隔开即可
二、动画
1、动画的理解
动画和过渡类似，两者的区别
1、过渡必须有触发条件，例如hover，acitve时，动画可以自动触发动画
2、过渡只有开始和结束帧，动画可以设置复杂过程
3、过渡只能执行一次，动画可以自定义执行次数
2、设置动画
第一步：设置关键帧:设置元素的行动轨迹
方法一：
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}}
方法二：
@keyframes 关键帧名称{
0%{初始状态属性}
50%（中间还可以再添加关键帧）
100%{结束状态属性
}
注意：
1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置
2、可以同时设置关键帧，用逗号（,）隔开就行
第二步、调用关键帧
1、animation-name
绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画(必填)
2、animation-duration
动画的完成时间，告诉系统动画持续的时长（必填）时间单位：s ms
3、animation-timing-function
设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型相同）
4、animation-delay
动画在启动前的延迟间隔默认0s
5、animation-iteration-count
动画的播放次数，告诉系统动画需要执行几次 ； n 动画播放n次 ； infinite无限次往返执行
6、animation-direction
指定是否应给轮流反向播放动画
normal 默认值： 从from向to运行，每次都是这样
reverse 从to到from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行
7、animation-fill-mode
规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式
none默认值 动画执行完毕 元素回到原来的位置
forwards 动画执行完毕，会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards和backwards的特点
8、animation-play-state
告诉系统当前动画是否需要暂停
running 默认值 动画执行
paused 动画暂停
9、animation
简写，可以写以上任意属性的可选值
animation:关键帧的名称 动画持续的时间 运动状态(linear(匀速)) 动画延迟的时间 动画的循环次数 动画的运动方式(设置正向或者反向)
.box2 { ····· animation: move 2s linear 1s infinite alternate forwards; } @keyframes move { /* 第一种 */ /* from { left: 0; } to { left: 500px; } */ /* 第二种 */ 0% { left: 0; top: 0; } 25% { top: 0px; left: 500px; } 50% { top: 300px; left: 500px; } 75% { top: 300px; left: 0px; } /* 不设置100% 浏览器会分配0%的位置，但不应用样式，会闪现到0，0位置 同时不设置循环，设置forwards 停止在结束位置，也会停在初始位置*/ 100% { left: 0px; top: 0px; } }三、变形（2d）
1、变形的理解
变形的理解
变形属性transform：translate() scale() rotate() skew()；(只折腾自己)
尽量变形写在一个transform里，不然下面再写一个，就会覆盖上面
可选值：
位移(x轴y轴平移)—translate()
缩放—scale()
旋转—rotate()
倾斜—skew()
2、transform:translate()
translate(参数1，参数2)
参数1:是指在x轴上移动的距离,正值，元素向右移动，负值向左移动，
参数2:是指在y轴上移动的距离，正值向下，负值向上，参数2默认为0
translateX()沿着x轴方向平移
translateY()沿着y轴方向平移
translateZ()沿着z轴方向平移 结合视距起作用.不能是百分比数值（3d变化）
注意：
1、平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的
2、位移的参考原点是元素的原来所处的位置
3、如果是通过active进行位移，执行完毕后会还原
4、 不会影响别的元素
5、对于行内元素是没有效果的
3、transform:rotate()
默认情况下是绕着中心点进行转动的
默认的单位是deg，比如rotate（45deg）
如果这个值为正值，则是元素对原点中心顺时针旋转；
反之如果这个值为负值，元素对原点中心进行逆时针旋转。
x轴y轴z轴进行设置：这里的X/Y/Z也是是需要大写的。
rotateX() ，指元素围绕其 X 轴以设定的度数进行旋转
rotateY() ，元素围绕其 Y 轴以设定的度数进行旋转
rotateZ() , 元素围绕其 Z 轴以设定的度数进行旋转
4、transform:scale
缩放属性是让元素根据中心原点对对象进行缩放
默认值是1，这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。
缩放属性的属性值和位移属性的属性值是类似的语法，可以是一个值，也可以有两个
属性值：
只有一个值的时候第二个值和第一个值是相等的；
两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。
单独对x轴y轴进行设置：同样这里的X/Y/Z也是是需要大写的。
transform:scaleX();元素只在x轴上缩放元素
transform:scaleY();元素只在y轴上缩放元素
也不会影响其他盒子
5、transform:skew
倾斜skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。
一个参数时：表示x轴的倾斜x角度,y轴默认为0
两个参数时：第一个参数表示x轴的倾斜角度，第二个参数表示y轴的倾斜角度
变形的单位是deg
x值：为正则向左变形，为负则向右变形
y值：为正则向上变形，为负则向下变形
以上是以左上角为参照向左向右，向上，向下变形
可单独对x轴y轴进行设置：这里的X/Y也是是需要大写的。
transform:skewX() ；
transform:skewY()；
6、变形原点（transform-origin）
原点就是元素的中心，通过transform-origin 改变原点的位置
使用变形原点transform-origin属性，该属性只有在设置了transform属性的时候会起作用
设置偏移量值都是从元素左上角开始的
transform-origin也有两个属性值：
transform-origin:（水平方向 垂直方向），默认值transform-origin:（center center）
值可以为方向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值
