-1

webkit-animationFirefox、Internet Explorer、Operaなどの非Webkitブラウザに以下を実装できることを知りたいですか?コーディングはどうなりますか?

@-webkit-keyframes FadeIn {
   0% {
    opacity:0;
      }
   100% {
    opacity:1;
      }
}

.object {
    -webkit-animation-name: FadeIn;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 3s;
}
4

2 に答える 2

7
@-webkit-keyframes FadeIn
{
        0%
        {
                opacity:0;
        }
        100%
   {
                opacity:1;
        }
}
@-webkit-keyframes FadeOut
{
        0%
        {
                opacity:1;
        }
        100%
   {
                opacity:0;
        }
}
@-moz-keyframes FadeIn
{
  from { opacity:0; } to { opacity:1; }
}
@-moz-keyframes FadeOut
{
  from { opacity:1; } to { opacity:0; }
}
@-o-keyframes FadeIn
{
  from { opacity:0; } to { opacity:1; }
}
@-o-keyframes FadeOut
{
  from { opacity:1; } to { opacity:0; }
}
@keyframes FadeIn
{
  from { opacity:0; } to { opacity:1; }
}
@keyframes FadeOut
{
  from { opacity:1; } to { opacity:0; }
}
#example
{
-webkit-animation:FadeIn ease-in 0.5s;
-moz-animation:FadeIn ease-in 0.5s;
-o-animation:FadeIn ease-in 0.5s;
animation:FadeIn ease-in 0.5s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}

IEはCSS3トランジションをサポートしていません。ここからのより多くのアドバイス

于 2012-12-15T05:22:46.790 に答える
1

あなたが使用できると思います

-moz-animation: 

モジラと

-o-animation:  

オペラのために。

InternetExplorerは同じものをサポートしていません

詳細については、このリンクを確認してくださいhttp://www.w3schools.com/css3/css3_animations.asp

于 2012-12-15T05:28:01.097 に答える