jquery - CSS3 动画。类似 'Tinder' app的雷达样式

Question

我正在尝试创建一个有点类似于雷达效​​果的动画，类似于“Tinder”应用。

这与我在 fiddle 中所做的非常相似，只是进行了一些微调，这是我需要帮助的地方!

这是 fiddle :http://jsfiddle.net/33w67/4/

基本上从 0% - 90% 我希望圆圈扩大，而内部 div 慢慢消失。

90% - 100% 我希望 div 继续增长，但在该时间范围内逐渐变为 0 的不透明度。

@-webkit-keyframes pulsate {
    0% {
        width:150px;
        height:150px;
        top:200px;
    }
    90% {
        width:870px;
        height:870px;
        top:-160px;
    }
    100% {
        width:950px;
        height:950px;
        top:-200px;
    }
}

此外，它的无限方面。我希望它看起来好像每 n 秒发出一次脉冲，而不是脉冲完成时发出脉冲。最初我曾使用 jQuery 在 timeout() 上添加和删除元素，但效率不高。现在它使用多个 div，这也有点糟糕。

非常感谢任何建议，谢谢!!

Answer 1

How does this look?

我清理了你的大部分代码，删除了一些不必要的 HTML 元素，合并了 CSS 代码，添加了缺失的分号(你仍然应该包括它们，即使它是将来的最后一行 CSS! )，并修复了您的动画。

我更改的主要内容是您只列出关键帧中的一些 CSS 属性，之前的任何属性都将保留。这意味着您可以只更改一次大小，但不透明度会更快结束。

/* HTML */
<section id='slide4'>
    <img src='http://www.ribbustingjokes.com/lilsusieq/scrapbook/frames/circle/frame_circle_A_1.png' style='width:178px'/>
    <div id='pulse1'></div>
    <div id='pulse2'></div>
</section>

/* CSS webkit prefixes left out for brevity (they're in demo) */
body { width:1280px; overflow-y:hidden; }
img { 
    position:absolute; 
    top:50%; left:50%; 
    z-index:1; 
    transform:translateX(-50%) translateY(-50%);
}
#pulse1, #pulse2 {
    border-radius:50%;
    position:absolute;
    height: 150px; width: 150px;
    top: 50%; left:50%;
    border: 2px solid rgba(66, 152, 181, 1);
    animation: pulsate 3s infinite;
    background-color:#4298b5;
    transform:translateX(-50%) translateY(-50%);
}
#pulse2 {
    animation: pulsate 3s -.5s infinite;
}
@keyframes pulsate {
    0%,100% {
        width:150px;
        height:150px;
        opacity:0;
    }
    1% { opacity:1; }
    70% {
        opacity:0.5;
    }
    99.999% {
        width:950px;
        height:950px;
        opacity:0;
    }
}

我还通过将不透明度动画的开始延迟到 1% 解决了动画结束时全色闪烁的问题

我还更改了第二个动画以使用负动画延迟，以便它立即开始。查看my article有关该主题的更多信息

我还使用了 transformX(-50%) transformY(-50%) 来完美地将对象居中，这使得它具有元素左侧和上方的宽度和高度

希望对您有所帮助!