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.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My test page</title>
<style type="text/css">
    .box{
        height:100px;
        width:100px;
        background-color:green;
        position:absolute;
        top:100px;
    }
    .animator{
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
    }
</style>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.box').css({left:'400px'});
        $('.box').addClass('animator');
        $('.box').css({left:'0px'});

    });

</script>
</head>
<body>
<div class="box">1</div>
</body>
</html>

Answer by Starx

I think this should do

$('.box').animate({left:'400px'}).fadeIn().addClass('animator').animate({left:'0px'});

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!