Question

I have a div. Lets say #logo and I want it on load delay 3 seconds and when display from left to right with slight animations like ease-in-out. I am adding animations:

#logo {
 opacity: 0;
 -webkit-animation-name: fromLeft, fadeIn;
 -webkit-animation-duration: 3s;
 -webkit-animation-iteration-count: 1;         
 -webkit-animation-direction: alternate;   /*   normal, alternate  */
 -webkit-animation-timing-function: ease-out;   /*  ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))  */
 -webkit-animation-fill-mode: forwards;   /* forwards, backwards, both, none  */
 -webkit-animation-delay: 3s;

 -moz-animation-name: fromLeft, fadeIn;
 -moz-animation-duration: 3s;
 -moz-animation-iteration-count: 1;         
 -moz-animation-direction: alternate;   /*   normal, alternate  */
 -moz-animation-timing-function: ease-out;   /*  ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))  */
 -moz-animation-fill-mode: forwards;   /* forwards, backwards, both, none  */
 -moz-animation-delay: 3s;

 -o-animation-name: fromLeft, fadeIn;
 -o-animation-duration: 3s;
 -o-animation-iteration-count: 1;         
 -o-animation-direction: alternate;   /*   normal, alternate  */
 -o-animation-timing-function: ease-out;   /*  ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))  */
 -o-animation-fill-mode: forwards;   /* forwards, backwards, both, none  */
 -o-animation-delay: 3s;

 -ms-animation-name: fromLeft, fadeIn;
 -ms-animation-duration: 3s;
 -ms-animation-iteration-count: 1;         
 -ms-animation-direction: alternate;   /*   normal, alternate  */
 -ms-animation-timing-function: ease-out;   /*  ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))  */
 -ms-animation-fill-mode: forwards;   /* forwards, backwards, both, none  */
 -ms-animation-delay: 3s;

  animation-name: fromLeft, fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 1;         
  animation-direction: alternate;   /*   normal, alternate  */
  animation-timing-function: ease-out;   /*  ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))  */
  animation-fill-mode: forwards;   /* forwards, backwards, both, none  */
  animation-delay: 3s;
}


@-webkit-keyframes fromLeft {
    0%   { left: 0px; }
    50%   { left: 20px; }
    100% { left: 50px; }
}
@-moz-keyframes fromLeft {
    0%   { left: 0px; }
    50%   { left: 20px; }
    100% { left: 50px; }
}
@-ms-keyframes fromLeft {
    0%   { left: 0px; }
    50%   { left: 20px; }
    100% { left: 50px; }
}
@-o-keyframes fromLeft {
    0%   { left: 0px; }
    50%   { left: 20px; }
    100% { left: 50px; }
}


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

FadeIn works on mozilla, but FromLeft do not.

Answer 1

This works fine on jsfiddle

<div id="logo" style="position:absolute">LOGOTEXT</div>

http://jsfiddle.net/nG5zb/4/

This will only work in chrome and other webkit browsers though. If you use firefox the animation syntax must start with -moz- instead of -webkit-