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，可以观察动画效果是否生效。