Answers for "slide up animation css"

slide up and down animation css

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

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>