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

Bertha 。 2022-04-11 09:48 206阅读 0赞

# 过渡 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动画的样式和一组指示动画样式的开始和结束状态的关键帧，以及可能的中间路标。

**可能的值：**

animationname  动画名称    
animationduration  持续时间    
animationdelay  延迟时间    
animationtimingfunction  运动曲线    
animationiterationcount  规定动画播放次数！    
infinite无限重复 或者number   
animationdirection  规定轮流反向播放动画！    
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));
    }