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.
+10
source to share