再谈CSS动画

《CSS 揭秘》一书中有这样一个案例，在聚焦input框时，弹出toast提示框，代码如下：

// html
<label for="username">
    Your username: <input id="username" />
    <span class="callout">Only letters, numbers, underscores(_) and hyphens(-) allowed!</span>
</label>


// css
.part_2 {
    input {
        display: block;
    }
    input:not(:focus) + .callout {
        transform: scale(0);
        transition: .2s transform;
    }      
    .callout {
        display: block;
        margin-top: 10px;
        transform-origin: 1.4em -.4em;
        transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
    }
}   
@keyframes elastic-grow {
    from { 
        transform: scale(0); 
    }
    70% {
        transform: scale(1.1);
        animation-timing-function: cubic-bezier(.1, .25, 1, .25)
    }
}

当然，你也可以在我的Github中找到这段代码，并轻松运行查看效果。

这段代码Get到了以下这些有趣的写法：

首先是如何用CSS选择器设置“focus或hover时显示动画”：input:not(:focus) + .callout，组合使用:not()选择器和:focus伪类选择器。

其次是配合transform-origin使用transform: scale(1)，其中transform-origin用以改变被转换元素的位置，它使得元素的缩放不从默认的中心点开始，而是我们期望的左上角位置。

最后，注意这里使用了大于一的贝塞尔曲线参数，以使toast能够有很好的回弹效果：transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;。