互联网+期间,说建站,谈运营与网络营销
一个动画结果,实行完后,进展一段工夫,然后又开端实行,反复循环
@-webkit-keyframes diamond { 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes diamond { 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
.animate { -webkit-animation: diamond 3s; animation: diamond 3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
①先给要利用动画的元素添加- - -利用了动画的类名
②利用 “animationend” 监听 动画能否完毕,该事情有个回调函数,在动画实行完成后实行,回调函数内里添加如下逻辑:
$('.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) })