编程开发培训-高端面授编程开发培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

Web前端培训:使用@keyframes创建CSS动画

  • 发布时间:
    2022-12-06
  • 版权所有:
    云和教育
  • 分享:

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