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

    使用@keyframes创建CSS动画            圆形

在上述代码中，第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，可以观察动画效果是否生效。