javascript - 如何为这个框设置动画以产生弹出效果？

Question

我有一个简单的 div 设置，我想知道如何使它具有“弹出”效果。例如，我希望它从一个较小的矩形开始，然后让它动画成一个稍大的矩形，让它产生一种它正在向你弹出的错觉。

HTML

<div id="submit-logged-out">
    You must be <a href="/wp-login.php?action=register">registered</a> to submit.
</div>

CSS

#submit-logged-out {
background: #000;
color: #fff;
font-size: 2em;
left: 112px;
padding: 40px;
position: absolute;
top: 200px;
}

JSFiddle：http: //jsfiddle.net/SSsVx/

Answer 1

最好使用纯 CSS 来完成：

.popout {
    animation: popout 1s ease;
    -webkit-animation: popout 1s ease;
}
@keyframes popout {
    from{transform:scale(0)}
    80%{transform:scale(1.2)}
    to{transform:scale(1)}
}
@-webkit-keyframes popout {
    from{-webkit-transform:scale(0)}
    80%{-webkit-transform:scale(1.2)}
    to{-webkit-transform:scale(1)}
}

然后只需将.popout课程添加到您的框中。

更新小提琴