CSS3 Transitions again

1 view
Skip to first unread message

anmldr

unread,
Dec 30, 2009, 10:11:15 AM12/30/09
to iPhoneWebDev
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

thomas alexander

unread,
Dec 30, 2009, 11:29:59 PM12/30/09
to iphone...@googlegroups.com

http://groups.google.com/group/iphonewebdev/search?hl=en&group=iphonewebdev&q=Running+function+after+ajax+page+load&qt_g=Search+this+group

maybe  you can find some help from above link


--

You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.



toriaezunama

unread,
Dec 31, 2009, 6:47:29 AM12/31/09
to iPhoneWebDev
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>

Jorge Chamorro

unread,
Dec 31, 2009, 9:02:37 AM12/31/09
to iphone...@googlegroups.com

anmldr

unread,
Dec 31, 2009, 11:45:36 AM12/31/09
to iPhoneWebDev
Thanks to each of you.

Also, I found Jonathan Stark's web site that you can subscribe to a
Quick Question service. I highly recommend it. He answered my
question as well.

Happy New Year.
Linda

jonathanstark

unread,
Jan 1, 2010, 1:24:32 PM1/1/10
to iPhoneWebDev
Thanks for the shout out Linda!

If anyone is interested in my approach (animation vs transition), I
posted it here:

http://jonathanstark.com/blog/2010/01/01/bare-bones-css3-panel-animation/

Happy New Year everyone!
j

Andrea Picchi

unread,
Jan 2, 2010, 12:05:59 PM1/2/10
to iPhoneWebDev
I didn't think about it before but sounds interesting.
I'm going to have a look right now...

maybe could be an interesting option.

On Jan 1, 7:24 pm, jonathanstark <jstark...@gmail.com> wrote:
> Thanks for the shout out Linda!
>
> If anyone is interested in my approach (animation vs transition), I
> posted it here:
>

> http://jonathanstark.com/blog/2010/01/01/bare-bones-css3-panel-animat...

anmldr

unread,
Jan 2, 2010, 10:23:36 PM1/2/10
to iPhoneWebDev
> Thanks for the shout out Linda!
You are welcome.

To others...he is a great help.

Here is a demo to show what I was trying to do.

http://www.anmldr.com/iphonewebdev

Linda

Reply all
Reply to author
Forward
0 new messages