body {
    font-family: Arial, sans-serif;
}

body {
    margin: 0px;
    width: 300px;
    height: 250px;
}


#slideshow {
    position: absolute;
    width: 300px;
    height: 250px;
    overflow: hidden;
    margin: 0;
  }



.anime{
  position: absolute;
}

  #del1{
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    width:480px;
    height:90px;
    background:white;
  }



  #el1 {
    position: absolute;
    z-index: 50;
    top:100px;
    left: 0;
    width:480px;height:90px;
    animation: ab1 7s linear;
    animation-iteration-count: infinite;
  }
  
  #el2 {
    position: absolute;
    z-index: 50;
    top:100px;
    left: 0;
    width:480px;height:90px;
    animation: ab2 7s linear;
    animation-iteration-count: infinite;
  }
  
  #el3 {
    position: absolute;
    z-index: 50;
    top:130px;
    left: 0;
    width:480px;height:90px;
    animation: ab3 7s linear;
    animation-iteration-count: infinite;
  }

  #el4 {
    position: absolute;
    z-index: 50;
    top:100px;
    left: 0;
    width:480px;height:90px;
    animation: ab4 7s linear;
    animation-iteration-count: infinite;
  }

  #el5 {
    position: absolute;
    z-index: 50;
    top:160px;
    left: 0;
    width:480px;height:90px;
    animation: ab5 7s linear;
    animation-iteration-count: infinite;
  }
  


  @keyframes ab1{
    0%  {  top:100px; opacity:0; }
    6%  { top:100px; opacity:0; }
    10%  { top:0; opacity:1; }
    85%  {  top:0; opacity:1; }
    90%  {  top:-100px; opacity:0; }
    100%{  top:-100px;  opacity:0; }
  }

  @keyframes ab2{
    0%  {  top:-100px; opacity:0; }
    12%  { top:-100px; opacity:0; }
    20%  { top:0; opacity:1; }
    72%  { left:0; top:0; opacity:1; }
    76%  { left:50px; top:0; opacity:0; }
    100%{    left:50px; opacity:0; }
  }

  @keyframes ab3{
    0%  {  left:-250px; opacity:0; }
    18%  { left:-250px; opacity:0; }
    26%  { left:-200px; opacity:1; }
    68%  { left:-200px; opacity:1; }
    72%  { left:-250px; opacity:0; }
    100%{    left:-250px; opacity:0; }
  }

  @keyframes ab4{
    0%  {  left:-100px; opacity:0; }
    24%  { left:-100px; opacity:0; }
    32%  { left:-200px; opacity:1; }
    64%  { left:-200px; opacity:1; }
    68%  { left:-100px;  opacity:0; }
    100%{    left:-100px; opacity:0; }
  }

  @keyframes ab5{
    0%  {  left:-150px; opacity:0; }
    30%  { left:-150px; opacity:0; }
    38%  { left:-200px; opacity:1; }
    60%  { left:-200px; opacity:1; }
    64%  { left:50px;  opacity:0; }
    100%{    left:50px; opacity:0; }
  }