CSS3 - Animating margin-left property through JavaScript

Considering this proof of concept, would it be possible to animate margin-left (both negative and positive values) through JavaScript?.. And how would you go about doing so?

Note: I know this is WebKit-only. And I'm fine with that, seeing as I am developi开发者_运维知识库ng for iOS Safari.

Update

Thanks for the answers, but jQuery's animate function doesn't support pure CSS animations, which is what I need.

I know that you specifically say "can you do this in JavaScript", but you shouldn't need to use JavaScript. I'm fairly certain that the proof of concept you link to only uses jQuery as a way to make the animations fall back to JavaScript so that all browsers play nice with the animation. Since you're specifically developing for Mobile Safari, you shouldn't need to use jQuery for this except to use a history plugin to push and pop states to make the browser's back button work; this is entirely doable via CSS transition properties and the :target pseudo-selector.

So as an alternative, you should be able to do something like this:

In HTML:

<div id="thing-that-will-transition">
    <a href="#thing-that-will-transition>click this to transition the div</a>
</div>

In CSS:

#thing-that-will-transition
{
    (bunch of properties)
    -webkit-transition: margin-left [the rest of your transition values]
}

#thing-that-will-transition:target
{
    margin-left: [your properties]
}

As long as your fragment URL matches up with the name of the element that you want to transition then you should be able to push the fragment in to the URL using JavaScript if you absolutely have to instead of using anchor with a fragment href while still having the transition take place. And if you use a jQuery history plugin or do your own pushing and popping of the history stack then you still get back-button behavior for your app.

I know you specifically asked for a JavaScript solution to trigger the CSS animation, but I'm just not sure why this is what you need. Sorry if this doesn't help you at all.


UPDATE: Here's a jsFiddle demonstrating the above. It uses this jQuery history plugin to manage the history stack, so that you can still get acceptable back/forward button behavior from the fragment URL's. The anchor tag uses the plugin's "push" or "load" method in its onClick with a standard fragment in the href attribute as a fallback for browsers without JS enabled.


UPDATE 2: Here's another jsFiddle that uses transforms/translations instead of transitions.


UPDATE 3 (by roosteronacid):

And as for getting the animations going through JavaScript, you can do:

var element = document.getElementById("...");

setTimeout(function ()
{
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);

You can set a transition in css3, and then subsequent changes to the element will be animated.

.MY_CLASS {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.3s ease-out;  /* IE10 */
    transition: all 0.3s ease-out;  
}

This specifies a nearly cross browser (damn IE) transition that applies to all css changes, lasts 0.3 seconds and eases, so it will slow down towards the end of the transition. Therefore, to animate it to the left/right, simply change the css:

$(".MY_CLASS").css("margin-left", "-300px");

Note this will animate it to a fixed position of 300px, if you want to animate to a position relative to its current location use:

var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");

See a working example here (jsFiddle)

Better use transitions, that are almost cross-browser supported (except IE), and set the keyframes through JS.

This works using CSS, HTML and WebKit only:

#wrapper {
     width: 700px;
     text-align: left;
     border-radius:10px;
     -moz-border-radius:10px;
     border-style:solid;
     border-width:1px;
     border-color:#ccc;
     padding:30px 30px;
     -moz-box-shadow: 0px 0px 5px #BBB;
     -webkit-box-shadow: 0px 0px 5px #BBB;
     box-shadow: 0px 0px 5px #BBB;

     -webkit-transition-property: -webkit-transform, margin-left;
     -webkit-transition-duration: 3s;
     -webkit-transition-timing-function: ease-in;
     -webkit-transform: translate(100px);
}

Just make a <div id="wrapper">Placeholder text</div> in an HTML file to test it out. Worked for me in Google Chrome 12.0.742.112 and Safari 5.0.5 (6533.21.1). If it doesn't do the animation right away, it may be due to your browser processing the translation too quickly (or caching, perhaps?). You might consider adding a delay somehow. I just pressed the refresh button a few times really fast. Worked for me.

Edit: Check out the source behind girliemac's test page. Some insightful stuff there. Also see this SO post.

you can use jqueries .animate() - http://api.jquery.com/animate/

Check my example - http://jsfiddle.net/ajthomascouk/jS83H/ - Press the + and -

Animating css margins with jQuery works like this:

$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});

To use webkit's css animations, you'd create a class that has the transform property, then you can use jQuery to add/remove said class as needed.