slide up and down animation css

1.my-div{
2  background-color: #f00;
3  animation: animationname 2s linear infinite;
4  /*animation: animation-name animation-duration animation-direction animation-iteration-count */  
5  transition: .5s ease-in-out;
6}
7@keyframes animationname{
8  0%{
9    transform: translateX(10px);
10  }
11  100%{
12    transform: translateX(-10px);
13  }

1//CSS
2* { margin:0; padding:0; }
3body { font-family: sans-serif;} 
4#content { margin: 50px; } 
5a { text-decoration: none; }  
6 
7.expandable {
8  background: #fff;
9  overflow: hidden;
10  color: #000;   
11  line-height: 50px;
12
13  transition: all .5s ease-in-out;
14  height: 0;
15 }
16 
17 .expandable:target {
18  height: 50px;
19}
20 
21//HTML
22<div id="content"> 
23  <a href="#nav"><span>Click Here</span></a>
24  <div class="expandable" id="nav">
25    <p>Cum enim magna parturient</p>
26  </div>
27  <a href="#nav2"><span>Click Here</span></a>
28  <div class="expandable" id="nav2">
29    <p>Cum enim magna parturient</p>
30  </div>
31</div>