問題描述

有一齒輪，現(xiàn)在做的動(dòng)畫是，鼠標(biāo)懸浮時(shí)才會(huì)觸發(fā)滾動(dòng)事件，

想做的動(dòng)畫是，頁(yè)面加載完成后，隔一段時(shí)間齒輪會(huì)自己滾出去再滾回來。向右滾動(dòng)和向左滾動(dòng)都能實(shí)現(xiàn)，但是不知道jquery中怎么寫“隔一段時(shí)間+滾出去再滾回來”

html:

<p id='wheel1'> <p>Running right</p></p><p id = 'wheel2'> <p>Running left</p></p>

css:

<style type='text/css'> #wheel1{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px;float: right; } #wheel2{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px; } #wheel2:hover{transform: translate(1000px) rotate(720deg);transition: transform 8s ease; } #wheel1:hover{transform: translate(-500px) rotate(-720deg);transition: transform 8s ease; } p{font-size: 25px;color: white;margin: 30px; }

問題解答

//到時(shí)見的時(shí)候#wheel1{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px;float: right;animation: myrotate2 8s ease forwards; } #wheel2{width: 150px;height: 150px;background-color: pink;border:5px dotted purple;border-radius: 80px;animation: myrotate1 8s ease forwards; } @keyframes myrotate1{from{transform: translate(0px) rotate(0deg);}to{transform: translate(1000px) rotate(720deg)} } @keyframes myrotate2{from{transform: translate(0px) rotate(0deg);}to{transform: translate(-500px) rotate(-720deg)}} p{font-size: 25px;color: white;margin: 30px; }回答2：

隔一段時(shí)間使用setInterval函數(shù)：

setInterval(function(){ 滾出去再滾回來();},一段時(shí)間);回答3：

方法一：純CSS 實(shí)現(xiàn)給兩個(gè)齒輪添加向左滾 和 向右滾的樣式html

<p class='roll-left'> <p>Running right</p></p><p class='roll-right'> <p>Running left</p></p>

在樣式里添加了無限循環(huán)滾動(dòng)的動(dòng)畫。如果需要滾出去隔一會(huì)再回來，可以把translate(-1000px)的值增大，比如 2000px，根據(jù)需求自己控制。translate 的值增大后，需要響應(yīng)的增大 rotate 的值，也是根據(jù)需求自己調(diào)節(jié)就行了。css

#wheel1, #wheel2{ width: 150px; height: 150px; background-color: pink; border:5px dotted purple; border-radius: 80px; position: absolute;}#wheel1{ right: 0;}p{ font-size: 25px; color: white; margin: 30px;}.roll-left{ animation: roll-left 6s linear infinite; // 給動(dòng)畫添加 infinite 值，讓動(dòng)畫無限循環(huán) -webkit-animation-direction:alternate; // 反向執(zhí)行動(dòng)畫 animation-direction:alternate;}.roll-right{ animation: roll-right 6s linear infinite; -webkit-animation-direction:alternate; animation-direction:alternate;}@keyframes roll-left{ from{} to {transform: translate(-1000px) rotate(-720deg)}}@keyframes roll-right{ from{} to{transform: translate(1000px) rotate(720deg)}}

方法二：使用jquery 控制如果想用 jquery 控制的話，css　需要修改一下

.roll-left{ animation: roll-left 8s linear;}.roll-right{ animation: roll-right 8s linear;}@keyframes roll-left{ 0% {} 50% {transform: translate(-1000px) rotate(-720deg)} 100% {}}@keyframes roll-right{ 0% {} 50% {transform: translate(1000px) rotate(720deg)} 100% {}}

js

setInterval(function(){ $(’#wheel1’).addClass(’roll-left’).one(’animationend’, function() { // 每次動(dòng)畫完成后移除樣式 $(’#wheel1’).removeClass(’roll-left’); });}, 2000); // 通過修改這個(gè)數(shù)值去控制每隔多久執(zhí)行一次