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'});
