<address id="hx9hh"><listing id="hx9hh"><menuitem id="hx9hh"></menuitem></listing></address>

      新聞中心

      互聯網+時代,說建站,談運營與網絡營銷

      當前位置:首頁 > 新聞中心 > 前端開發 > jQuery-動畫停頓循環執行

      jQuery-動畫停頓循環執行

      時間:2022-06-02

      一個動畫效果,執行完后,停頓一段時間,然后又開始執行,重復循環

      步驟1: @keyframes先定義好動畫:


      @-webkit-keyframes diamond {   50% {     -webkit-transform: translateY(-10px);     transform: translateY(-10px);   } } @keyframes diamond {   50% {     -webkit-transform: translateY(-10px);     transform: translateY(-10px);   } } 

      步驟2:定義一個類,使用定義的動畫


      .animate {   -webkit-animation: diamond 3s;   animation: diamond 3s;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out; } 

      步驟3:使用js/jquery 控制動畫的執行


      ①先給要使用動畫的元素添加- - -使用了動畫的類名
      ②使用 “animationend” 監聽 動畫是否結束,該事件有個回調函數,在動畫執行完成后執行,回調函數里面添加如下邏輯:

      1. 移除元素的 “動畫類名”
      2. 設置 setTimeout 延遲執行方法,setTimeout 里面寫 添加元素的 “動畫類名”,以及多長時間后添加類名

      $('.banner-btn-img').addClass('animate'); $('body').on('animationend webkitAnimationEnd oAnimationEnd', '.banner-btn-img', function () {   $('.banner-btn-img').removeClass('animate');     setTimeout(function () {       $('.banner-btn-img').addClass('animate');   }, 1000) })
      首頁
      案例中心
      關于我們
      聯系我們
      久久久噜噜噜久久人人玩

      
      

          <address id="hx9hh"><listing id="hx9hh"><menuitem id="hx9hh"></menuitem></listing></address>