How do I use CSS transformations to slide a div on screen?

Posted by Colen on Stack Overflow See other posts from Stack Overflow or by Colen
Published on 2010-06-06T19:19:12Z Indexed on 2010/06/06 19:22 UTC
Read the original article Hit count: 301

Filed under:

css

|

ipad

|

safari

|

html5

Hi,

My web page has two divs on it, A and B. Div A is visible, Div B is hidden.

When the user clicks a link in div A, I want to "slide" div A off screen (leaving via the left edge), and slide div B on screen (entering via the right edge).

I've found that jquery animations are very slow on the ipad, so I want to use the webkit CSS animations instead, which I believe are rendered in hardware. How do I do this?

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about ipad

The Complete List of iPad Tips, Tricks, and Tutorials

as seen on How to geek - Search for 'How to geek'
The Apple iPad is the latest new toy, and we’ve put together a comprehensive list of every tip, trick, and tutorial that we could find to help you get the most out of it—and we’re even giving one away to one lucky reader. So read on! Note: We’ll be keeping this page updated as… >>> More
5 reason why you should upgrade to new iPad (3rd generation)

as seen on Tech Dreams - Search for 'Tech Dreams'
Apple released the new iPad, 3rd generation, couple of days ago and they will be available in stores from March 16 onwards. It’s the best tablet available in the market and for first time buyers it’s a no brainer to choose it. What about the iPad owners? Should they upgrade their iPad 2 to the… >>> More
iPad:Study basics for iPad development?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello friends, sorry if this question is being repeated. May i know from where i can learn entire iPad development practice? Thank you. >>> More
iPad Implentation: the path from iPhone to iPad development

as seen on Stack Overflow - Search for 'Stack Overflow'
I am an iphone appplication developer. But i dont know anything about ipad applications. Please give me advice on how to transition. >>> More
Coolest iPad Apps: Top 71 Free iPad Apps

as seen on Internet.com - Search for 'Internet.com'
The best free iPad apps in news, entertainment, shopping and games. Plus: cool free iPad apps for office productivity and social networking. >>> More