0

http://css3.bradshawenterprises.com/cfimg/にある、リチャード・ブラッドショーによる css3 トランジションに関する素晴らしいチュートリアルを見つけました。

Visual Studio 2010 が次のキーフレーム ディレクティブをまったく好まない 3 つの画像を遷移する div を使用して、マスター ページ (ASP.Net 4) をセットアップしようとしています。なぜですか? 私はhtml5とcss3に設定されています。

@-webkit-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
25% {
    opacity:1;
}
75% {
    opacity:0;
}
 100% {
   opacity:0;
 }
}

@-moz-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
25% {
    opacity:1;
}
75% {
    opacity:0;
}
 100% {
   opacity:0;
 }
}

アニメーション コードは次のとおりです。

.logotransitions img.top {
       -webkit-animation-name: cf3FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;
    -webkit-animation-direction: alternate;

    -moz-animation-name: cf3FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 18s;
    -moz-animation-direction: alternate;
}
4

1 に答える 1

1

これらは単なるアニメーション定義です...ターゲット要素がそのアニメーションを使用することを宣言する必要があります: 

div {
    -webkit-animation : cf3FadeInOut 1s ease infinite;
    -moz-animation : cf3FadeInOut 1s ease infinite;
    animation : cf3FadeInOut 1s ease infinite;
}

ところで、webkit と mozilla ブラウザーのみをターゲットにしている場合を除き、すべてのブラウザー ベンダーを含めるようにコード (定義と宣言) を更新する必要があります。

div {
    -webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
    -o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
    -moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
    -ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
    animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}

/*...*/
@-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/
于 2012-08-25T15:19:41.223 に答える