<noframes id="9rxrj"><big id="9rxrj"></big>
<sub id="9rxrj"><video id="9rxrj"></video></sub>
<pre id="9rxrj"></pre>

新聞中心

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

當前位置:首頁 > 新聞中心 > 前端開發 > 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) })
首頁
案例中心
關于我們
聯系我們
成人区欧美精品一区二区不卡_成人在色线视频在线观看免费社区_成人亚洲一区无码久久中央榜_主页