css过渡+2D、3D转换+动画

会员：各大互联网巨头
它设定了整个平台的规则，监督整个过程。

现在学习的是css2.1 但是到css3时，就要考虑兼容性问题。

浏览器前缀

谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-

sass
过渡，2D转换

transition 过渡

之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。

css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。
（transtion:translate(1s); 从初始状态到最终状态的转换经历1秒钟的时间）

transition-property

指定过渡的属性。 all为指定所有属性都有过渡效果。 （必须写）

transition-duration

过渡的时间，单位可以是s或者ms。 （必须写）

transition-delay

指定过渡生效的延迟时间。

transition-timing-function

ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

过渡属性 完成时间 运动曲线 延迟时间
transition：all 3s linear 1s;
一般有数值/中间状态的属性才可以设置过渡，比如：width，height

过渡问题：

当使用外链式，链入css时，假如设置的是 点击后发生过渡，但网页刷新且没有点击时会有一个过渡效果（如：位置发生改变，margin：0 auto）
这是因为，网页加载的时候，虽然.html文件与css文件一同加载，但是毕竟是两个文件，当css样式作用的时候，.html文件中的盒子已经有了一个初始状态，

transform变换

缩放 scale（）

放大 缩小
格式
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会旁边的盒子造成影响。

位移 translate（）

格式：
tramsform：translate（水平位移，垂直位移）当前状态下进行水平位移，垂直位移
属性值：
px 正值：向右或向下。
百分比 是按照盒子本身的宽高。

只写一个值时，是水平位移。

旋转 rotate（）

格式： transform：rotate（角度）
单位：deg
【注】使用transform多个属性时：transfrom:rotate(36deg) transform(100px,200px);

倾斜skew()

格式：transform:skew(角度)
盒子以及盒子中的内容都会倾斜

3D旋转

transform: rotate3D(x,y,z,deg); 

x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
rorateX，X轴旋转
rorateY，Y轴旋转
rorateZ ，Z轴旋转
旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。
可以在展示3D效果的盒子下添加transform-style:preserve-3d;，可以直观看到3d立体效果
在父盒子添加perspective属性，视觉上让人与屏幕有一定距离，可以观察3d效果中在Z轴上的变化

动画

1.通过@keyframs定义动画。
2.在指定元素中，通过animation属性来调用动画。

.定义动画

格式：
@keyframes 动画名 {
from{
/* 初始帧 /
}
to{
/ 结束帧 */
}
}
【注】动画名不要起关键字，最好见名知意。

动画的调用

通过animation属性来调用动画。

基本属性

animation-name：动画名称

animation-duration

执行一次动画的完成时间。

animation-iteration-count

动画的执行次数 infinite 表示无数次。

animation-delay:

动画延迟执行的时间。

animation-fill-mode:填充方式

可以确定动画运动前后状态

forwards：在动画结束后，盒子保持结束帧状态。
backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态
both backwards forwards都生效
none(默认值)

animation-direction: 动画的执行方式

alternate：交替执行。
（动画完成后 默认会回到初始位置，此时返回速度与设置的动画完成时间无关，但altrnate属性值会使动画完成后把动画倒放一样再重新执行一遍，以回到初始位置，往返时间相同）
normal 正常（默认）
reverse 反向 从结束帧开始到初始帧结束。
【注】alternate 反向也会算一次执行时间。

假如设置动画完成次数为三，

animation-timing-function：动画运动曲线

linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

【注】动画属性要有中间状态，一般是数值型
复合写法：animation: name duration timing-function delay iteration-count direction fill-mode;
其中前两个动画名 完成时间 位置不可以改变，其余的位置前后无所谓
添加两个动画格式

animation: name duration timing-function delay iteration-count direction fill-mode,name duration timing-function delay iteration-count direction fill-mode;

filter滤镜

属性值
brightness （%）亮度
invert（）反色
opacity（0-1）透明度
grayscale（%）灰度
contrast（%) 对比度
hue-rotate(deg)色相翻转
saturate（%）饱和度
sepia（%）褐色
blur(px)模糊度
drop-shadow(5px 5px 5px yellowgreen)阴影（水平位移 垂直位移 模糊度 阴影颜色）