如何实现对setInterval的效果弹出和背面的图像

Question

我有一个形象

<div id="container"> 
    <section id="intro"> 
     <img id="egg" src="img/egg.png"> 
    </section> 

的CSS这是

#egg { 
height: 130px; 
width: 140px; 
position: absolute; 
top: 160px; 
left: 90px; 
} 
#container { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
} 

jQuery的执行

$(document).ready (function(){ 
    function animate(){ 
    $("#egg").toggle({effect:"scale", percent:80}); 
    $("#egg").toggle({effect:"scale", percent:100}); 
    } 
    setInterval(animate ,2000); 
}); 

现在我想要在鸡蛋上实现弹出和支持动画，以便在0.4秒的时间延迟上图像弹出以缩放至100分钟持续1秒，然后再次缩小至约60％至80％，并且在延迟0.4秒之后再次进行相同的循环。我怎样才能使用JavaScript或jQuery做到这一点？

这个jQuery实现将其缩小到零，即鸡蛋变得不可见，然后回到100％。我想从60％到100％，并继续循环。其次，该中心位于蛋的左上方以进行缩放。我希望它位于图像的中心，以便均匀地缩放到60％回到100％，以在中心产生弹出和背景效果。原始图像中心

注意：缩放应该位于中心的形象。不左上角是默认

Answer 1

罗希特看看这个..希望你期望这个输出

https://plnkr.co/edit/5BbG255CqJVXkOLfa7gM?p=preview

setInterval(function(){ 
    $("#egg").animate({width: '80%', height: '80%'}, 1000) 
    .animate({width: '100%', height: '100%'}, 1000) 
}, 2000); 

Answer 2

变与CSS动画

#intro { 
 
    width: 100%; 
 
} 
 
#egg { 
 
height: 130px; 
 
width: 140px; 
 
position: absolute; 
 
top: 160px; 
 
left: 90px; 
 
overflow:hidden; 
 
animation: eggMove 9s infinite; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    min-height: 700px; 
 
} 
 
@keyframes eggMove { 
 
    0% { transform: scale(1); } 
 
    49% { transform: scale(0.8); } 
 
    51% { transform: scale(0.8); } 
 
    100% { transform: scale(1); } 
 
}

<div id="container"> 
 
    <section id="intro"> 
 
     <img id="egg" src="http://worldartsme.com/images/egg-clipart-1.jpg" /> 
 
    </section> 
 
    </div>