css基础-变形-过渡-动画

0.transition:过渡
transform:变形
translate:移动

一.变形
1.变形涉及两种坐标系：笛卡尔坐标系和球坐标系。


注意：1.笛卡尔坐标系的正方向
2.每个元素都有自己 的参考系，各轴都相对自身运动

3.2D变形中只是关注360度空间（即是x轴和y轴组成的平面),2D旋转是绕着z轴进行旋转的

4.范围框：css控制的边框，轮廓和外边距都不算

5.有多个变形函数的时候，如果有一个错了，整个变形函数都会失效的

6.变形是不会叠加的，也就是只能在原图操作变形。但是过渡和动画就是可以效果叠加的

7.变形不能应用到基元行内元素上，eg:span a

transform:translatedZ(不能接受百分号)
transform:translate3d(三个参数必须写全了)否则是无效的。
scale(参数大于1则表示放大，小于1则是缩小)
scale3d(三个参数，当且仅当有深度时起效果)
rotate(只有1个参数，单位是deg,grad,turn,rad)
rotate3d(前三个参数指x,y,第四个是角度值)//rotate3d(45deg)=>rotate3d(0,0,1,45deg)
skewX skewY元素不能沿z轴或者3D空间的向量倾斜

8.视域函数：在3d空间改变形状时，需要赋予元素一定的视域，相当于深度。
将视域比如金字塔，顶点在视域的原点，顶点与基底之间距离越短，形变效果越失真。
视觉值必须是正值，而且不能是0。perspective()函数的顺序很重要。
perspective（）函数和perspective属性不一样！
perspective属性会修改子元素的视域，而perspective（）函数只会修改transform:里面的
修改视域的原点：perspective-origin属性修改。

9.transform-origin属性移动原点，第一个值是针对横向，第二个值是纵向，第三个值是z轴的长度。
第一二个值可以用百分数，关键字(top,bottom.center,left,right),长度，但是第三个只能是长度。

10.要在3d空间展现元素，使用transform-style属性修改，默认是transform-style:flat(扁平的)。
修改为transform-style:preserve-3d。
为避免transform-style:preserve-3d被覆盖，加上

overflow:visible;
filter:none;
clip:auto;
clip-path:none;
mask-image:none;
mask-border-source:none;
mix-blend-mode:nomal

11.处理背面:显示和隐藏背面
backface-visiblity:hidden/visible

二.过渡
transition:transition-property transition-duration transition-timing-function transition-delay

1.不支持动画属性eg:border-style，立刻从一个值到另一个值。
2.transition-property在逗号分隔的一组，必须把all放在最，前面


3.transition-duration的值为负值时，整个属性都将失效。
transition-delay的值可以为值
4.也可以单独设置transition-duration，transition-delay的值
5.transition-delay的值可以是负值。

三.动画：过渡是最简单的动画，
animation :animation-name animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction animation-fill mode animation-play-state
1.过渡 pk 动画
相同点：css属性值都在一段时间内发生变化
不同点：动画有更大的控制权，对css属性的改变可以通过关键帧控制，
过渡是隐式变化，而动画变化的过程中用到的属性值要在关键帧中显示声明，
动画改变的属性值可以不在元素的前后两个状态中。

2关键帧选择符可以是以逗号为分隔的一组百分数，也可以是关键字from或to

3.每一个关键帧只能声明1次，如果多次重复声明，则最后一个起作用。
ps:如果from和to一起声明了，则都起作用。

4.动画效果要注意中间值的变化，也就是不要开始和结尾都是一样的，这样就没动画的效果了。
最好将开始值赋值一下。eg:0%{border-radio:0;}

5.不支持动画但不被忽略的属性
（1）visibility:hidden；和visibility：visible没有中间值，但是支持动画属性
（2）animation-timing-function:虽然不支持动画，但是不被忽略

6.@keyframes动画声明的关键帧块可以使用appendRule(n)或deleteRule(n)修改。关键帧的内容可以通过findRule(n)获取.

7.动画的三个事件：animationstart(开始),animationend(结束)，animationiteration(上一次结束与下一次开始之间发生)。如果动画播放只有1次，则不会触发animationteration。一个动画名称触发一次animationstart和aanimationend.而animationiteration取决于迭代的次数。
每一个动画事件都有三个只读属性：animationName,elapsedTime(在支持elapsedTime的浏览器中,它的值等于延时的绝对值；仍需要加前缀的浏览器，它的值则为0),pseudoElement在所有浏览器都不用加前缀。

8.如果定义了多个动画，且动画同时改变相同的属性，此时要多加注意啊!结束动画可以使用display:none;

9.
10.animation-duration:定义动画中全部关键帧完成一次循环的事件长度，如果没有定义animation-duration则没动画效果，而且animationstart和animationend也会触发的，这个属性也不能为负值。
如果一组animation-duration有一个是无效值，则这个都会失去效果。

11.如果animation-iteration-count不是整数，动画会在中途结束。不能是负数，如果是无效值则默认值为1。当animation-iteration-count:0是ok的，这样就迭代0次，也会触发animationstart和animationend事件。如果一组中有一个是无效值，则这个都会失去效果，即默认播放1次

12.animation-direction

13.animation-delay：定义浏览器把动画附加在元素上多久开始第一次迭代
当设置为负值时，不会延时，但从动画中途就开始播放。可以利用animation-delay设置时间从而达到CSS动画链的效果。或者是js事件监听器在触发animationend事件设置animation-name属性.

14.为了提高性能，应该把transfrom和opacity放在动画中，而top,bottom，right和visibility则不要这样做。

15.animation-timing-function改变动画的内部时序

16.不要在动画使用！important可能使得属性失效。

17.如果有多个动画对同一属性指定了不同的值，则最后一个应用的动画将覆盖之前的动画中声明的值

18.设置动画的播放状态：animation-play-state:running(播放)/paused(暂停)
如果在动画延迟阶段animation-play-state:paused，延时时钟也将暂停，animation-play-state:running，延迟时钟开始计时。

19.animation-fill-mode属性可以定义触发animationstart事件之前和触发animationend事件之后动画如何影响元素。
animation-fill-mode默认是none，意思是不播放就没效果。
animation-fill-mode：backwards，意思是在0%或from的时候就起作用，而不是等animation-delay时间结束。
animation-fill-mode：forwards，意思是在动画播放结束后，即animation-iteration-count设置的迭代次数全部结束后，触发animationend继续作用。
animation-fill-mode：both，意思是动画附加元素就立即起作用，而且触发animationends事件之后继续起作用。

20.3D之透视

要有3D效果一定要有透视，透视写在被观察对象的父元素上面，单位是px,近大远小。