Menu
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?
665
One of the things you can do with the 'animation' property of CSS is show a series of slides as a slideshow that plays automatically, i.e., it shows one slide for a few seconds, then the next slide for a few seconds, etc. In the examples below, the slideshow repeats indefinitely.
If you think that's cool, realise that CSS Animation can be applied not just to the transforms, but also to other CSS properties including: opacity, colour and a bunch of others.
Below is an example showing how to do this with webkit animations. You might also read this article for more background: http://webkit.org/blog/138/css-animation/
The rounded corners are just to show that the page is moving off screen, not just changing width.
The main idea is to animate the left CSS property and use a container div to do clipping.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
-webkit-border-radius: 15px;
}
#left {
position: absolute;
background-color: blue;
-webkit-transition: left 1s ease-in;
}
#right {
position: absolute;
left: 50px;
background-color: green;
-webkit-transition: left 1s ease-in;
}
#left.animate {
left: -50px;
}
#right.animate {
left: 0px;
}
#container {
position: relative;
overflow:hidden;
}
</style>
<script>
function animate() {
document.getElementById('left').className = 'animate';
document.getElementById('right').className = 'animate';
}
</script>
</head>
<body>
<div id='container'><div id='left'></div><div id='right'></div></div>
<input type='button' onclick='animate();' value='Animate!'></input>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
