Web前端培訓：使用@keyframes創建CSS動畫

使用@keyframes創建CSS動畫的用法與前面講到的CSS過渡用法類似，區別在于動畫中v-enter類名在節點插入DOM后不會立即刪除，而是在animationend(動畫結束)事件觸發時刪除。

@keyframes規則創建動畫，就是將一套CSS樣式逐步演變成另一套模式，在創建動畫過程中，可以多次改變CSS樣式，通過百分比或關鍵詞from和to(等價于0%和100%)來規定動畫的狀態。@keyframes的語法格式為如下：

@keyframes animation-name {
  keyframes-selector { css-styles; }
}

在上述語法中，keyframes-selector表示動畫時長的百分比，css-styles表示一個或者多個合法的CSS樣式屬性。

下面我們通過例4-4演示如何使用@keyframes創建CSS動畫。

【例4-4】

(1)創建C：\vue\chapter04\demo04.html文件，具體代碼如下：

<div id="app">
    <button @click="show=!show">使用@keyframes創建CSS動畫</button>
    <transition name="bounce">
        <div class="circular" v-if="show">圓形</div>
    </transition>
</div>
<script>
var vm = new Vue({ el: '#app', data: { show: true } })
</script>

在上述代碼中，第2行給button按鈕添加了單擊事件，通過單擊按鈕，改變變量show的值，第4行的圓形就會根據CSS中@ketframes規則來完成動畫。

(2)在demo04.html文件中編寫CSS樣式，具體代碼如下：

div.circular {
    width: 100px; height: 100px; background: red;
    border-radius: 50%; margin-top: 20px; text-align: center;
    line-height: 100px; color: #fff;
}
.bounce-enter-active {
    animation: Ami .5s;
}
.bounce-leave-active {
    animation: Ami .5s;
}
@keyframes Ami {
    0% {transform: scale(0); background: red;}
    20% {transform: scale(1); background: burlywood;}
    50% {transform: scale(1.5); background: blueviolet;}
    100% {transform: scale(1); background: burlywood;}
}

在上述代碼中，因為transition的name屬性值為bounce，所以第6行和第9行的類名使用“bounce-”作為前綴名。第12～17行用于通過@keyframes規則來創建名稱為Ami的動畫樣式，其中，0%表示動畫的開始狀態，100%表示動畫的結束狀態。

(3)在瀏覽器中打開demo04.html，可以觀察動畫效果是否生效。