15、CSS 变换、过渡、动画与布局全解析

CSS 变换、过渡、动画与布局全解析

1. CSS 过渡

CSS 过渡允许我们控制元素从一个状态到另一个状态的变化。在过渡中，我们可以使用过渡简写属性来定义过渡效果。以下是一些关键要点：
- 过渡计时函数 ：有效的计时函数值包括 linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out 、 cubic-bezier() 、 step-start 、 step-end 或 steps() 。例如，在下面的代码中，我们使用 linear 计时函数：

/* CSS snippet */
#box:hover {
    background-color: gray;
    border-radius: 25px;
    transition: border-radius linear 2s;
}

• 过渡延迟 ：如果不指定 transition-delay 属性的值，则过渡将在 CSS 样式规则生效的瞬间开始。添加延迟值（如 2s ）将在状态改变后两秒开始过渡。
• 多过渡属性