前端基础学习笔记 过渡、动画和变换

过渡 transition

让属性变化成为一个持续一段时间的过程，而不是立即生效的

可能的属性：

执行变换的属性： transition-property,  
变换延续的时间： transition-duration,  过渡延迟的时间：transition-delay

在延续时间段，变换的速率变化 transition-timing-function,  
       linear： 匀速 
       ease：（默认值） 慢快慢 
       easein： 慢入 
       easeout： 慢出 
       easeinout： 慢入慢出 
       cubicbezier 贝塞尔曲线（ x1, y1, x2, y2 ）

而我们通常会用简写方式（一般直接用这个）：

transition:width 2s, height 2s, background-color 2s, transform 2s;

多个属性过渡的时候 用逗号隔开！ 
display不支持过渡    淡入淡出最好用opacity

动画 animation

可以为从一个CSS样式配置到另一个CSS样式配置的动画制作动画。动画包含两个组件，一个描述CSS动画的样式和一组指示动画样式的开始和结束状态的关键帧，以及可能的中间路标。

可能的值：

animation­name  动画名称  
animation­duration  持续时间  
animation­delay  延迟时间  
animation­timing­function  运动曲线  
animation­iteration­count  规定动画播放次数！  
infinite无限重复 或者number 
animation­direction  规定轮流反向播放动画！  
normal： （默认） 正常方向 
reverse： 反方向运行 
alternate ： 动画先正后反方向运行 
alternate reverse： 先反后正方向

animation-name动画名称

div{
    /*动画：动画名称 动画持续时间*/
    animation: move 2s;
}

规定动画如何运动，绑定动画，注意写法：

@keyframes move{
    from{width:100px;backrgound:red;}
    to{width:500px;background:blue;}
    /*0%{} 100%{}*/
}

animation-play-state: 动画执行状态

paused 暂停动画
running 运行动画
animation-fill-mode: 规定动画的第一帧和最后一帧的状态！通俗的讲就是动画结束之后保持
什么状态  
none （默认） 原始状态>动画>原始状态 
forwards 原始状态>动画>停在动画帧100% 
backwards (忽略原始状态)进入动画帧0%>动画>原始状态 
both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%

变换

属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）

1.旋转rotate

这里面的值可以是（角度deg）（圈turn）（弧度rad）（梯度grad） 只是占据自己的位置，不会影响其他元素的位置

div{
    transform:rotate();
}

2.变换焦点 transform-origin

具体的值 
百分比值 
left / top / right / bottom / center

div{
    /*这里要注意的是：不要写在hover样式里面，而是本身元素里面。默认是中心点 用空格隔开
    */
    transform-origin:x y;
}

3.缩放 scale

放大和缩小的倍数 不支持负值！

div{
    transform:scale(1.2);
}

4.位移 translate

div{
    /*两个值写法 中间用逗号隔开*/
    transform:translate(X,Y);
    /*一个值写法*/
    transform:translateX();
    transform:translateY();
}

5.倾斜

不同于旋转，可以用度数，弧度 角度 梯度控制 ，当到一个临界点的时候会消失不见

div{
    transform:skew(30deg,30deg);
}

6.复合写法

transform 不同的值用空格隔开 括号里面用逗号隔开

div{
    transform:translate(50px,50px) scale(1.2);
}

允许调整大小

注意：必须要添加overflow:;属性 因为overflow重新检测盒子里面的内容
overflow值可以是： 
默认visible 
hidden 隐藏 
auto 根据内容决定是否滚动条 
scroll 滚动条

resize:

none 默认 
horizontal 水平可以缩放 
vertical 垂直可以缩放 
both 垂直水平都能缩放

舞台

观众离界面的距离

body{
    perspective:800px;
}

计算calc()

calc()，你就可以通过计算来决定一个CSS属性的值,可以用在任何长度,数值,时间,角度,频率
等处。
.
可以使用  + - * /  四则运算 也可以加括号 
运算符号前后必须要有空格 
在实际的开发中需要加上兼容性前缀，前缀加在 calc 前面 
而真正在计算的时候 我们要把所有的距离都考虑进去 如：边框 内边距 等…

div{
    width:-webkit-calc(100% - （100px - 50px）);
    width:-moz-calc(100% - (25px * 2));
}