SOURCE

<div class="page"></div>

.page{
    width: 100px;
    height: 100px;
    background: red;
}

.page:hover{
    width: 200px;
    height: 200px;
}

.page{
    /* transition: 1s; //  过渡 1秒 */
    /* transition: 1s height; //特定过渡  */
    /* transition: 1s height, 1s 1s width; // 宽 延迟1秒执行 */
    /* transition: 1s ease; // ease-out: 减速 -in 加速  */
    /* transition: 1s height cubic-bezier(.83,.97,.05,1.44); */
    /* transition: 1s 1s height ease; //完整写法 延迟 持续 属性 模式  */
    /* animation: 1s myfirst infinite // 无限播放 */
    /* animation: 2.1s myfirst 3  播放3次 */
    animation: 1s myfirst forwards 

}

@keyframes myfirst{
    0% {background: red}
    25% {background: rgba(0, 255, 34, 0.603)}
    50% {background: blue}
    75% {background: rgba(0, 255, 34, 0.603)}
    100% {background: red}
}