1

我有一个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 不适用。

4

1 回答 1

0

这在 jsfiddle 上运行良好

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

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

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

于 2012-08-04T07:48:40.877 回答