javascript - How do I animate this box to have a pop out effect? - Stack Overflow

admin管理员组

文章数量:1221420

I have a simple div set up and I was wondering how I could make it have a 'pop out' effect. For example, I would like it to start as a smaller rectangle and have it animate to a slightly larger rectangle giving it the illusion that it is popping out at you.

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: /

I have a simple div set up and I was wondering how I could make it have a 'pop out' effect. For example, I would like it to start as a smaller rectangle and have it animate to a slightly larger rectangle giving it the illusion that it is popping out at you.

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/

• javascript
• jquery
• css

Share Improve this question Follow asked Jan 26, 2013 at 22:55 J82J82 8,4572323 gold badges5959 silver badges8989 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 17

This is best done with plain 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)}
}

Then just add the .popout class to your box.

Updated Fiddle

本文标签： javascriptHow do I animate this box to have a pop out effectStack Overflow