0

私は私に質問をしました。-webkit-プレフィックス(または別のプレフィックス)を使用してアニメーションを作成する場合、このプレフィックスのみを使用してプロパティを作成するか、すべてのプレフィックスを追加する必要があります。

例えば

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

また

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
4

1 に答える 1

3

ルールを適用できるのはWebKitブラウザーのみで@-webkit-keyframesあるため、これらのルール内に他のプレフィックスを含めることはまったく意味がありません。

@keyframesルール内のプロパティではなく、ルールに他のプレフィックスを含める必要があります。内部のプロパティは、必要に応じて一致するプレフィックスを使用します。

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(0); }
    100% { -webkit-transform: scale(1); }
}

@-moz-keyframes bounce {
    0% { -moz-transform: scale(0); }
    100% { -moz-transform: scale(1); }
}

@-o-keyframes bounce {
    0% { -o-transform: scale(0); }
    100% { -o-transform: scale(1); }
}

@keyframes bounce {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

(はありません。で使用する@-ms-keyframes必要はありません。)-ms-transform@keyframes

于 2012-12-23T22:21:07.503 に答える