fadein after 2s, then fadeout after 10s animation

Marino

I have a problem which I don’t know how to solve.

I want to to get this cloud to become visible after 2s and then become invisible again after 10s. It is important that the px remains as I have it because the cloud should:

• travel
• become visible in the beginning of the content area
• become invisible at the end of the content area
• travel to the end of the page invisible.

CSS:

.cloud1 {
  margin:18px 0px 0px 0px;
  animation:mymove 31s infinite;
  animation-delay:0s;
  position:absolute;
  z-index:1;

  /*Safari and Chrome*/
  -webkit-animation:mymove 31s infinite;
  -webkit-animation-delay:0s;
  -webkit-opacity:0 5s;
}

@keyframes mymove
{
  from {left:1050px;}
  to {left:0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
  from {left:1050px;}
  to {left:0px;}
}