Add a fade out to this animation after 5 seconds

[toolman]

Hi there,

I have the following animation which moves a DIV back and forth. What I would like to do is to fade the div out after 5 seconds. How would I do this?

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
  }

  50% {
    -webkit-transform:translate3d(-10px, 0, 0);
    transform:translate3d(-10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
	   from {opacity :1;}
    to {opacity :0;}
  }

  50% {
    -webkit-transform:translate3d(-10px, 0, 0);
    transform:translate3d(-10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name:shake;
  animation-name:shake;
  -webkit-animation-duration:2s;
  animation-duration:2s;
  -webkit-animation-iteration-count: 4;
  animation-iteration-count: 4;
	

}

Any ideas?
Thanks!

[PaulOB]

You could do it like this:

@keyframes shake { 
  0%{transform:translate3d(0, 0, 0);}
  5%{transform:translate3d(-10px, 0, 0);}
  10%{transform:translate3d(0, 0, 0);}
  15%{transform:translate3d(-10px, 0, 0);}
  20%{transform:translate3d(0, 0, 0);}
  25%{transform:translate3d(-10px, 0, 0);}
  30%{transform:translate3d(0, 0, 0);}
  35%{transform:translate3d(-10px, 0, 0);} 
  40%{transform:translate3d(0, 0, 0);opacity:1;}
  100% {opacity:0;}
}
.shake {
  -webkit-animation-name:shake;
  animation:shake 10s forwards ;
}

Which could be shortened to this:

@keyframes shake { 
  0%,10%,20%,30%,40%{transform:translate3d(0, 0, 0);}
  5%,15%,25%,35%{transform:translate3d(-10px, 0, 0);}
  41%{opacity:1;}
  100% {opacity:0;}
}
.shake {
  -webkit-animation-name:shake;
  animation:shake 10s forwards ;
}

[Gandalf]

@PaulOB

-webkit-animation-name:shake;

That’s interesting. Is is only the animation-name that needs the -webkit- prefix?

[PaulOB]

@Gandalf

hat’s interesting. Is is only the animation-name that needs the -webkit- prefix?

Ooops sorry I left out the webkit keyframe (and -moz).

@-webkit-keyframes shake { 
  0%,10%,20%,30%,40%{-webkit-transform:translate3d(0, 0, 0);}
  5%,15%,25%,35%{-webkit-transform:translate3d(-10px, 0, 0);}
  41%{opacity:1;}
  100% {opacity:0;}
}
@-moz-keyframes shake { 
  0%,10%,20%,30%,40%{-moz-transform:translate3d(0, 0, 0);}
  5%,15%,25%,35%{-moz-transform:translate3d(-10px, 0, 0);}
  41%{opacity:1;}
  100% {opacity:0;}
}
@keyframes shake { 
  0%,10%,20%,30%,40%{transform:translate3d(0, 0, 0);}
  5%,15%,25%,35%{transform:translate3d(-10px, 0, 0);}
  41%{opacity:1;}
  100% {opacity:0;}
}
.shake {
  -webkit-animation-name:shake;
  -moz-animation-name:shake;
  animation:shake 10s forwards ;
}

However for an effect like that I’d probably get rid of all the prefixes anyway as its not important to content.

[toolman]

Many thanks