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を使用する場合、アニメーション構文は-webkit-ではなく-moz-で開始する必要があります

于 2012-08-04T07:48:40.877 に答える