我有一个简单的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/
最佳答案
最好用普通的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
类添加到您的框中。Updated Fiddle