2

境界を移動または変更できない要素でハイライトアニメーションを実行しようとしているこの時点に到達したので、背景色に加えてアウトラインを使用して、アニメーション領域をより大きくしました要素自体 (ここにサンプルがあります): 

@keyframes hilite {
    0% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
    20% {
        background-color: #F6F6BC;
        outline: #F6F6BC solid 10px;
    }
    100% {
        background-color: transparent;
        outline: #ffffff solid 10px;
    }
}

しかし今、私はバックグラウンド アニメーションがすべての場合にトリガーされるのを見てびっくりしていますが、アウトライン アニメーションは、要素にアウトライン スタイルの値がある場合にのみ機能します (背景なしがアニメーションを回避しない場合、何も機能しません)。

ここで見ることができます。

私はそれを修正したくありません、それはすでに修正されていますが、それを理解してください - 私には非論理的です。

よろしくお願いします。

4

1 に答える 1

10

境界線とアウトラインのスタイルはアニメーション化できません。これは設計によるものです。noneフィドルの最後のボックスに示されているように、 からへの変更をアニメーション化しようとすると、すぐsolidにに切り替わります。これにより、定義された色にアニメーション化する前に、一時的に黒いアウトラインとして表示されるため、そうではありません。その意味では、実際にはアウトラインなしからソリッド アウトラインにアニメーション化することはできません。solid

非表示のアウトラインから表示されるアウトラインへのスムーズなアニメーションが必要な場合は、と の間ではなくoutline-color、色の値 と の間でアニメーション化します。コンテナの背景も白であれば、これも機能します。transparentoutline-stylesolidnone#fffffftransparent

于 2013-01-17T19:33:05.883 に答える