Activating Webkit CSS3 animation using Javascript

Posted by jeffreyveon on Stack Overflow See other posts from Stack Overflow or by jeffreyveon
Published on 2010-06-13T19:03:21Z Indexed on 2010/06/13 19:12 UTC
Read the original article Hit count: 262

Filed under:

animation

|

webkit

|

css3

|

transition

I am looking to use Webkit CSS3 to move a absolutely positioned DIV from one location to another on the screen when a button is pressed, by changing its left and right CSS properties. However, all the examples for doing this that I saw use a static CSS rule to apply this transition.

I don't know the new position before hand, so how do I apply this CSS3 transition dynamically?

© Stack Overflow or respective owner

Related posts about animation

jerky animation using Core Animation

as seen on Stack Overflow - Search for 'Stack Overflow'
In my iPhone app, I am trying to get some red and white stripes that are scrolling across the screen to animate smoothly when the speed of the stripes gets high. In my app the user starts the animation and changes the scrolling speed by a finger swipe and changes the width of the stripes by a two… >>> More
Trigerring other animation after first ending Animation (Objetive-C)

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have a simple animation which simply modify the position of a button: [UIView beginAnimation:nil context:nil]; [UIView setAnimationsDuration:3.0]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; mybutton.frame = CGREctMake(20, 233, 280, 46); [UIView commitAnimations]; I want to… >>> More
how to import mesh animation from cinema4d into blender ?

as seen on Super User - Search for 'Super User'
I need to import a mesh animation from Cinema4D into Blender. I tried to do that using Collada.The Collada 1.3 importer doesn't seem to do anything, the Collada 1.4 importer seems to work, but the animation didn't get imported into Blender. After reading this post, I tried modifying the animation… >>> More
Making a ViewFlipper like the Home Screen using MotionEvent.ACTION_MOVE

as seen on Stack Overflow - Search for 'Stack Overflow'
Ok I have a ViewFlipper with three LinearLayouts nested inside it. It defaults to showing the first one. This code: // Assumptions in my Activity class: // oldTouchValue is a float // vf is my view flipper @Override public boolean onTouchEvent(MotionEvent touchEvent) { switch (touchEvent.getAction())… >>> More
How to Animate Text and Objects in PowerPoint 2010

as seen on How to geek - Search for 'How to geek'
Are you looking for an eye catching way to keep your audience interested in your PowerPoint presentations? Today we’ll take a look at how to add animation effects to objects in PowerPoint 2010. Select the object you wish to animate and then click the More button in the Animation group of the Animation… >>> More

Related posts about webkit

Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More
How do I know all the events (especially webkit only) supported by webkit/chrome/safari

as seen on Stack Overflow - Search for 'Stack Overflow'
I just cannot find a reference doc for webkit/chrome/safari >>> More
Does webkit-scrollbar work with webkit-transition?

as seen on Stack Overflow - Search for 'Stack Overflow'
I want a custom webkit-scrollbar to animate a different background color for the hover state. The code below changes the color on hover but doesn't animate anything. It works on a div so I suspect webkit-scrollbar doesn't play nice with transitions. ::-webkit-scrollbar-thumb { background-color:… >>> More
Print.css issue in Webkit

as seen on Stack Overflow - Search for 'Stack Overflow'
The page in question is featured here: http://www.allwebcafe.com/news/news-article.php?id=78 For some reason, when a user attempts to print any article of this type from a Webkit-based browser (I've confirmed this in both Safari and Chrome), the pages are all blank. On the flip side, everything behaves… >>> More
Why Chrome does not show CSS3 ::-webkit-scrollbar scrollbar for iframe?

as seen on Stack Overflow - Search for 'Stack Overflow'
Why Chrome does not show CSS3 ::-webkit-scrollbar scrollbar for iframe? Demo http://jsfiddle.net/laukstein/C9s3P/ <iframe scrolling="yes" style="overflow-x:hidden; overflow-y:scroll; width:150px; height:50px;" src="http://en.wikipedia.org/wiki/Web_browser"></iframe> CSS ::-webkit-scrollbar{ … >>> More