transition示例1：点击效果

注：CSS动画指DOM元素的样式从一种向另一种平缓地过渡（而非瞬间变化），分为触发型（transtion）、主动型（animation+keyframe）两种

注：transition属于触发型动画，当DOM元素的状态发生指定的变化时，动画被触发

点击一下

.box {
    ...
    transition: all 0.1s ease 0;
    /* 参数依次为：设置动画效果的属性、动画持续时间、速度曲线、延迟时间 */
}

.active {
    transform: scale3d(0.8, 0.8, 0.8)
}
const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
    btn.classList.add('active')
    const timeoutId = setTimeout(() => {
        btn.classList.remove('active')
        clearTimeout(timeoutId)
    }, 100)
})