IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • 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,可以观察动画效果是否生效。