April 15, 2012

CSS3 move then animate

Question by Paul Thompson

I am trying to animate my pages using css3 transitions.
I need to be able to move an element and then animate using css3.
For instance move a hidden div off the screen and then animate it back on the screen.
Sounds strange I know but I have simplified my explanation and really do need this functionality. So in the code below I want to move the element 400px left and then animate it to 0. So….no animation move 400px, add CSS3 transition class and animate to 0px. Hope I have explained it ok…thanks for any help.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My test page</title>
<style type="text/css">
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">


<div class="box">1</div>

Answer by Starx

I think this should do


Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!