animation css slide in as appear code example

Example 1: slide in animation css

You can use CSS3 transitions or maybe CSS3 animations to slide in an element.

For browser support: http://caniuse.com/

I made two quick examples just to show you how I mean.

CSS transition (on hover)

Demo One

Relevant Code

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}
In this case, Im just transitioning the position from left: -100px; to 0; with a 1s. duration. It's also possible to move the element using transform: translate();

Example 2: css animation slide down

//CSS
* { margin:0; padding:0; }
body { font-family: sans-serif;} 
#content { margin: 50px; } 
a { text-decoration: none; }  
 
.expandable {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }
 
 .expandable:target {
  height: 50px;
}
 
//HTML
<div id="content"> 
  <a href="#nav"><span>Click Here</span></a>
  <div class="expandable" id="nav">
    <p>Cum enim magna parturient</p>
  </div>
  <a href="#nav2"><span>Click Here</span></a>
  <div class="expandable" id="nav2">
    <p>Cum enim magna parturient</p>
  </div>
</div>