Web前端HTML5+CSS3知识点（13)css入门-过渡及动画

1 过渡

transition的作用
通过过渡，可以指定一个属性发生变化时的切换方式。
通过过渡，可以创建一些非常好的效果，提升用户的体验。
2.transition的属性值
transition-property：指定需要过渡的属性，多个属性间用逗号隔开,如果所有属性都需要过渡，则可以使用all关键字。大部分有数值的属性，都支持过渡效果(能够计算的值）。注意：过渡时，必须从一个有效值向另外一个有效值进行过渡。
ransition-duration：指定需要过渡的时间。时间单位包括秒和毫秒,1s=1000ms,
transition-timing-function：过渡的时序函数，指定过渡的执行方式，可选值有：ease（默认值，慢速开始，先加速，再减速）、linear（匀速运动）、ease-in（慢速开始，加速运动）、ease-out（快速开始，减速运动）、ease-in-out（先加速，再减速，但是和ease的速度不一样）

cubic-bezizr():贝塞尔曲线，也可以指定时序函数。
https://cubic-bezier.com/#.74,.68,.56,.57（贝塞尔曲线网址)steps():分步执行过渡效果，第一个值表示过渡的次数，第二个值可以设置end（表示时间结束的时候执行过渡，这个值为默认值)或start(在时间开始时执行过渡)
transition-delay：过渡效果的延迟、等待相应的时间以后，再执行过渡。
transition：简写属性，同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。

2 动画

1.动画的作用
-动画和过渡类似，都是可以实现一些动态的效果，不同的是，过渡需要某个属性发生变化时才会触发，而动画可以自动触发。
-设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤。
-关键帧 @keyframes 名 {
表示动画开始的位置 from{} ,也可以用0%{}表示，
表示动画结束的位置 to{}，也可以用100%表示
}
2.animation属性
animation-name：表示要对当前元素生效的关键帧的名字
animation-duration：表示动画执行的时间
animation-delay：设置动画的延时时间。
animation-timing-function：设置动画的时序函数，与transition一样。
animation-iteration-count：动画执行的次数，可以直接设置次数或者是infinite（无限次)
animation-direction：设置动画的方向，默认值是normal（正常的方向，从from向to执行）。可选值：reverse (反方向执行，从to向from执行）、alternate（从from向to执行，但重复执行动画时，会反向执行）、alternate-reverse（从to向from执行，但重复执行动画时，会反向执行 ）
animation-play-state：设置动画的执行状态，默认值是running，当设置为paused的时候，动画暂停。
animation-fill-mode：动画的填充模式，可选值:none(默认值，当动画执行完毕，元素回到原来的位置）、forwards（当动画执行完毕后，元素停止到动画结束的位置）、backwards(动画延时等待时，元素就会处于开始to的位置，结束的时候会回到原来的位置)、both（具备forwards和backwards两个特点，延时就在开始位置，结束元素停止到动画结束的位置）。

3 变形

1.变形的作用
变形是指通过CSS改变元素的形状或者位置，变形不会影响到页面的布局。
2.transform:translate
用来设置元素的变形效果
平移：translateX（）向X轴方向平移，translateY（）向Y轴方向平移，translateZ（）向Z轴方向平移。注意：平移元素，值设置成百分比，是相对于自身大小计算的。
当width和height确定的时候，可以使用 top:0;right:0;bottom:0;left:0; margin：auto;的方式居中，但是当width和height不确定时，这种方法就失效了，此时可以采用 left :50% ,top :50% tranform:translateX(-50%) translateY(-50%)的方法居中。

z轴平移，就是调整元素在z轴的位置，正常情况下，就是在调整元素和人眼之间的距离。距离越大，元素离人越近。
z轴平移，属于立体效果（近大远小),正常情况下，网页是不支持透视的。如果需要看出效果，必须设置网页视距，网页视距可以通过perspective来设置。

4 旋转

1.旋转的作用
-通过旋转，可以使元素沿着x、y、z轴旋转一个指定的角度
2.transform：rotateX/Y/Z()
rotateX（）：沿着X轴旋转
rotateY（）：沿着Y轴旋转
rotateZ（）: 沿着Z轴旋转
backface-visibility：是否显示背面，默认值为visible，设置成hidden的时候，不显示背面。
3.一些属性
transform：preserve-3d 设置元素3D的变形效果
opacity：设置透明度， rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。

5 缩放

1.作用
-sacle()是对函数进行缩放的函数
2.transform：scaleX/Y()
-scaleX（）：水平方向的缩放
-scaleY（）：垂直方向的缩放
-scale（）： 两个方向的缩放
-scaleZ():Z轴方向缩放，这个时候只有当当体现3D效果时才能看的出来效果。

translate-origin：默认值是center，当设置其他值时，可以改变变形的起始点。