01过渡transition

一、API概览

• transition-property：属性
• all：全部属性过渡(默认)
• none：无属性过渡
• String：某个属性过渡

二、使用&注意

1.时间

• duration与delay作用于所有节点，包括自身的::before与::after

• transition中出现两个时间值时，第一个解析为duration，第二个解析为delay

• transition中出现一个时间值时，解析为duration

2.多属性

.btn {
    transition: 
        translate 250ms linear, 
        background-color 250ms linear;
}

3.如何调整过渡的速度

• linear （线性） ：它导致元素在整个过渡期间以恒定的速度移动。它不模仿自然运动，通常在动画需要一致速度的情况下使用。

• ease （默认值） ： 它开始时较慢，然后逐渐加速，最后再次减速。这种时间函数常用于模拟物体自然运动，通常是默认的选择。

• ease-in （加速） ： 它以较慢的速度开始，然后逐渐加速。它通常用于元素进入屏幕视图并且在屏幕上有停止点的情况，例如弹出框。

• ease-out （减速） ： 与ease-in 相反，ease-out 时间函数以较快的速度开始，然后逐渐减速。它通常用于元素退出屏幕视图的情况，例如元素消失。

• ease-in-out （先加速后减速） ： 它在整个过渡中提供相等的加速和减速。它通常用于需要反复运动的动画，如元素循环淡入淡出。

4.自定义贝塞尔曲线

5.时间函数演示网站

6.弹簧动画&linear() generator

7.哪些属性可以过渡，哪些不能过渡

8.过渡动画的触发器

• 悬停触发：鼠标悬停在元素上时触发过渡，这通常使用 :hover 伪类选择器来实现

• 焦点触发：在元素获得或失去焦点时触发过渡，通常使用 :focus 、:focus-within 和 :focus-visible 等伪类选择器来实现

• 锚点链接触发：页面内部的锚链接被点击时触发过渡，通常使用 :target 伪类选择器来实现。使用 :target 伪类可以为单页应用或滚动到页面内特定部分的情况添加平滑的过渡效果

• 激活状态触发：用户点击并按住元素（例如链接或按钮）时触发过渡，通常使用 :active 伪类选择器来激活元素状态

• 表单状态触发：表单状态伪类选择器用于选择表单元素（如输入字段、复选框、单选按钮等）的不同状态，如 :checked、:valid、:invalid 、:required 等状态。你可以使用这些状态伪类选择器来触发过渡动画，以改善用户体验

• 与 JavaScript 不同的 class 变化：当元素的 class 通过 JavaScript 发生更改时，CSS 会过渡已更改的符合条件的属性。

9.离散属性的过渡

@layer transition {
    .card {
        transition: opacity 0.25s, display 0.25s;
        transition-behavior: allow-discrete;
    }

    .fade-out {
        opacity: 0;
        display: none;
    }
}

// 多属性处理
transition: 
        opacity 0.5s, 
        display 0.5s allow-discrete, 
        overlay 0.5s allow-discrete;

三、原理

四、实战