Here is a simple example
<html>
<head>
<style type="text/css">
#page {
width:100px;
height:100px;
background-color:#555;
}
.setup {
-webkit-transform: translateX(300px);
}
.slide {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0s;
-webkit-transform: translateX(0px);
}
</style>
</head>
<body onload="load();">
<div id="page" class="setup">
</div>
<script type="text/javascript" charset="utf-8">
function $ID(id) { return document.getElementById(id); }
function load() {
$ID('page').className = 'slide';
}
</script>
</body>
</html>
On Dec 30, 3:11 pm, anmldr <[email protected]> wrote:
> I posted a similar question last night but it has not shown up yet.
> If there happen to be double posts, I apologize.
>
> I am having difficulties getting my head around CSS3 transitions. If
> someone will show me a slide transition from the right to the left of
> a div in the onload event of a page, I would appreciate it.
>
> I realize that most of the sliding is usually done between hidden
> div's on the same page. But, I would like to see a simple transition
> outside of any other styles to try and understand it better.
>
> Thanks,
> Linda
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
