notice how when you load squareup the form on the left animates in. How do you do a css3 animation like that? Is javascript required to add some class unload?

Thanks

notice how when you load squareup. the form on the left animates in. How do you do a css3 animation like that? Is javascript required to add some class unload?

Thanks

• javascript
• jquery
• css

• 3 Doing a view source it looks like a basic jQuery animation. – j08691 Commented Apr 19, 2012 at 21:09
• 3 Have you looked at the source of that page? – halfer Commented Apr 19, 2012 at 21:09
• 3 With JavaScript (or one of its libraries). There's no page-load event to which CSS can respond, so it's unlikely to be pure CSS. – David Thomas Commented Apr 19, 2012 at 21:11

2 Answers 2

Pure CSS 3 animation would be the best way to go - since it's clean, simple and easy.

However, older browsers wont support pure CSS 3 animation so you might be best off with jQuery for now (untill more people support CSS 3 animations perhaps).

<script>
$(function(){
      // make a basic fadeIn animation
      $("#divId").fadeIn();
});
</script>

Replace #divId with your div id attribute. Don't forget to display: none; the div.

For jQuery animations simply go to http://api.jquery./animate/

Actually, after reviewing the source code, that effect appears to be mostly, if not all, CSS3. Here's a snippet of the CSS:

.square-signup-form h1, .square-signup-form .pricing-prop, .square-signup-form p, .square-signup-form .instructions, .square-signup-form .cards-accepted, .cardcase-signup-form h1, .cardcase-signup-form .pricing-prop, .cardcase-signup-form p, .cardcase-signup-form .instructions, .cardcase-signup-form .cards-accepted {
        color: #fff;
        -moz-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
        -webkit-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
        -o-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
        transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
}
.square-scene .square-signup-form {
    -moz-transform: translate(0pt, 0pt);
    opacity: 1;
    z-index: 3;
}
.ie8 .square-scene .square-signup-form {
    display: block;
}

You can view the full CSS at https://d1g145x70srn7h.cloudfront/static/db447699c3d01e60cd9b8e1e1c721ce8837f22bd/stylesheets/home.css

Here's a copy that's easier to read: http://pastebin./gHTn1YuA