How do I animate this checkbox to get the bubble effect?

I have a simple div setup and was wondering how I can get it to "pop out". For example, I would like it to start out as a smaller rectangle and have it animate to a slightly larger rectangle, giving it the illusion that it appears in 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/

+3


source to share


1 answer


This is best done with simple 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 class .popout

to the field.

Updated Fiddle

+10


source







All Articles