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）将在状态改变后两秒开始过渡。
• 多过渡属性