1

私は CSS3 トランジション効果を Chrome と Safari で動作させようとしましたが、うまくいきませんでした。以下のコード例でわかるように、:target擬似クラス セレクターを使用してキーフレーム アニメーションをトリガーしています。この場合、div をある位置から別の位置に移動します。別のリンクをクリックするとすぐに、div が消えます (元の位置に戻ります)。

この瞬間的なジャンプを防ぐために、div の元の状態に遷移効果を追加しました。これを行うと、少なくとも Firefox または Opera を使用している場合は、トランジションが開始され、div が一番上に「スライド」して戻ります。Chrome と Safari はトランジション効果を無視しているようですが、その理由がわかりません。

このようにトランジションとアニメーションを組み合わせたことがなかったので、何か不足している可能性がありますか?

Chrome と Safari (できれば CSS3) で動作させる方法についてのアイデアはありますか?

Mac OS X、Chrome 21、Firefox 14.0.1、および Opera 12.01 を使用しています

これがjsFiddleで、jsFiddle の例で使用されているコードは次のとおりです。

HTML

<a href="#id1">One</a>
<a href="#id2">Two</a>

<div id="id1">
Hello hello
</div>

CSS

#id1 {
    position: absolute;
    top: -100px;
    left: 100px;
    width: 100px;
    height: 100px;

    /* Not working */
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: 0.5s;

    /* Working */
    -moz-transition-timing-function: linear;
    -moz-transition-duration: 0.5s;

    /* Working */
    -o-transition-timing-function: linear;
    -o-transition-duration: 0.5s;    
}

#id1:target {
     -webkit-animation: down 0.5s ease-in forwards;
        -moz-animation: down 0.5s ease-in forwards;
          -o-animation: down 0.5s ease-in forwards;
}

@-webkit-keyframes down {
      0%   { top: -100px; left: 100px; }
      100% { top: 200px; left: 100px;  }
}

@-moz-keyframes down {
      0%   { top: -100px; left: 100px; }
      100% { top: 200px; left: 100px;  }
}

@-o-keyframes down {
      0%   { top: -100px; left: 100px; }
      100% { top: 200px; left: 100px;  }
}

</p>

4

1 に答える 1

3

アニメーションがトランジションをキャンセルするように見えます。おそらく、明示的に設定leftしていないtopため、トランジションがどこから開始するかわからないためです。

アニメーションなしで実行できることを示すために、フィドルを更新しました。

ページの読み込み時にアニメーションを表示することを目的としていた場合は、キーフレームをに追加し直してください。

簡単な説明を使用し、次のようなデフォルト値を除外することで、多くのスペースを節約することもできます。forwards

#id1 {
    position: absolute;
    top: -100px;
    left: 100px;
    width: 100px;
    height: 100px;

    -webkit-transition: 0.5s linear;
       -moz-transition: 0.5s linear;
         -o-transition: 0.5s linear;
}

#id1:target {
    top: 200px;
    left: 100px;
     -webkit-animation: down 0.5s ease-in;
        -moz-animation: down 0.5s ease-in;
          -o-animation: down 0.5s ease-in;
}

@-webkit-keyframes down {
      0%   { top: -100px;}
      100% { top: 200px;}
}

@-moz-keyframes down {
      0%   { top: -100px;}
      100% { top: 200px;}
}

@-o-keyframes down {
      0%   { top: -100px;}
      100% { top: 200px;}
}

非常にスムーズな遷移が必要な場合は、2D変換の使用を検討してください。それらは、遅い効果のために（少なくともWebkitで）気付くサブピクセル精度を使用します。この小冊子を参照してください。

于 2012-08-09T20:23:16.250 に答える