March 18, 2013

fadein after 2s, then fadeout after 10s animation

Question by 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.


.cloud1 {
  margin:18px 0px 0px 0px;
  animation:mymove 31s infinite;

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

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

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

Answer by Starx

It can be done with a little trick. With the animation set for 10 seconds. You can do something like this.

@keyframes mymove

    0%   {left:0px; opacity: 0;}
    20%  {left:1050px; opacity: 1; } /* This 20% will mean 2 second on a 10 seconds scale */
    100% {opacity: 0; left: 1050px; }



Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!