Question

all

i have a problem in trying to using jquery and css3 keyframe to move or circle an element such as div or image around a point or mouse continues, not delay time, just keep circle around.

Any solution ? please show me. thanks in advance !

Answer 1

From your clarifying comments:

given a position, how to make a image or element circle it

CSS3 Animation

To make an animation where you rotate an element around a point smoothly and continue forever, you can use these CSS3 keyframe/animation and 2D transformation properties:

• animation to specify timing and which keyframes to use.
• animation-timing-function to specify that you want a smooth animation (linear).
• @keyframes to specify exactly how to animate the element.
• transform-origin to rotate around a point other than the center of the div (some offset).
• transform to move the element out from the center of rotation (radius of orbit).
• rotate(<angle>); to specify that you want to rotate in your keyframe(s).

You will probably need to duplicate these and prefix each with -webkit-, -moz- and -ms- for a while until the CSS3 animation features are widely supported.

Specifying position in CSS/jQuery

You can use plain-old CSS to rotate an HTML element around an arbitrary point:

div.someClass {
    position:absolute;
    top:250px;
    left:350px;
}

If you want to continually center your animation on the mouse cursor, you’ll need to use jQuery to handle the mousemove event on the document, and set the left and top properties of the element’s CSS.

Something like:

$(document).mousemove(function(event) {
    var animated = $("#animated");
    var offsetX = 50; // Pixels to the right of the cursor
    animated.css("left", event.pageX + offsetX);
    animated.css("top", event.pageY - animated.height() / 2);
});

Docs

• The current CSS3 animation specs
• The current CSS3 2D transformation specs.
• A basic w3schools tutorial on how to use CSS3 animations.
• The jQuery .mousemove handler method
• The jQuery .css setter method

Code Sample

I had built a code sample to research the functions and references you’d need to build this on your own. Since the other answer already gave you their code sample, I’ll go ahead and post mine.

• http://jsfiddle.net/vLwDc/1/

I highly recommend you build this out yourself so you can learn how these things work 🙂

Browser Support

See this page with a CSS3 Animation support matrix, and this page with a CSS3 2D Transform support matrix.

The gist is:

• It will only work in IE 10.0 and above. It won’t work in IE9
• It will work in pretty much any version of Firefox or Chrome
• It should work in Safari 4.0 and later
• It probably won’t work in Opera (I’d need -o- Tranform tags to make it work, and the Animation support just isn’t there yet)