CSS3 transistion slide

CSS3 transistion slide

by jleyva

HTML

<div id='container'>
<div id='left'>
    <ul><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li></ul>
    <ul><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li></ul>
    
</div>
<div id='center'><ul><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li></ul>
<ul><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li></ul>    
    </div>
<div id='right'><ul><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li></ul>
<ul><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li><li>abcdefg hijkl</li></ul>    
    </div>
</div>
<input type='button' onclick='animate();' value='Animate!'></input>

CSS

div {
  width: 200px;
  height: 400px;
  -webkit-border-radius: 15px;
}

#left {
  position: absolute;
  background-color: blue;
  -webkit-transition: left 0.4s ease-in; 
}

#center {
  position: absolute;
  left: 200px;
  background-color: green;
  -webkit-transition: left 0.4s ease-in; 
}

#right {
  position: absolute;
  left: 400px;
  background-color: yellow;
  -webkit-transition: left 0.4s ease-in, width 0.4s ease-in;
}

#left.animate {
  left: -200px;
}

#center.animate {
  left: 0px;
}

#right.animate {
  left: 200px;
  width: 200px;
}

#container {
  position: relative;
  overflow:hidden;
  width: 600px;
}

JavaScript

function animate() {
    document.getElementById('left').className = 'animate';
    document.getElementById('center').className = 'animate';
    document.getElementById('right').className = 'animate';
}