Question

我有一个div。让我们说#logo和我想要它在负载延迟3秒和从左到右显示轻微的动画像轻松进出。我正在添加动画：

#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适用于mozilla，但FromLeft不适用。

Answer 1

这适用于jsfiddle

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

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

这仅适用于chrome和其他webkit浏览器。如果使用firefox，动画语法必须以-moz-而不是-webkit -

开头

我想要一个div从左到右滑动css3关键帧动画。我做错了什么？

1 个答案: