5

私が理解している限り、CSS トランジションを使用して実装できるものはありませんが、CSS アニメーションを使用して実装することはできませんが、その逆はできません。

つまり、トランジションには CSS アニメーションと同等のものがあります。たとえば、これ

.ablock:hover {                                                   
  position: relative;                                             
  -moz-transition-property: background-color, color;              
  -moz-transition-duration: 1s;                                   
  -webkit-transition-property: background-color, color;           
  -webkit-transition-duration: 1s;                                                             
  color: red;                                                     
  background-color:pink;                                          
}

以下と同等です。

.ablock:hover {
    -moz-animation-duration:1s;                                   
    -moz-animation-name:transition;                               
    -webkit-animation-duration:1s;                                
    -webkit-animation-name:transition;                            
}       

@-moz-keyframes transition {                                      
    to {                                                          
        color: red;                                               
        background-color: pink;                                   
    }
}       

@-webkit-keyframes transition {                                   
    to {                                                          
        color: red;                                               
        background-color: pink;                                   
    }
}

私の質問は、CSS トランジションとアニメーションの両方をサポートするブラウザーについて話している場合、どちらかのアプローチを選択するためのユースケースは何ですか? トランジションに関しては、1 つだけ挙げることができます。それらはより簡潔な構文を持ち、@-moz-keyframes、@-webkit-keyframes などの大量のコードをコピー ペーストする必要はありません。

JavaScript からの制御に関しては、柔軟性と複雑さのアニメーションがはるかに適切なツールです (少なくとも、一見しただけでは)。では、ユースケースとは何ですか？

UPD: OK、質問で見つかった興味深い情報をリストしてみましょう。

  • これは Roman Komarov によって寄稿されました。たとえば、div と子 div があるとします。親 div がホバーされている間、子要素を遷移させています。マウスを離すと、遷移はキャンセルされます。このキャンセルの期間は、移行に既に費やした時間とまったく同じです。アニメーションは「すぐに」キャンセルされます。それでも、これら2つの動作がどれほど標準的かはわかりません。
4

2 に答える 2

9
  • アニメーションはループできます (そして、キーフレームが存在する場合もあります)。
  • 移行はより柔軟になり、さまざまな値やさまざまな状況で簡単に移行できます。

アニメーションによっていくつかのトランジションをエミュレートできますが (投稿で言及したように)、トランジションはより強力です。

  • アニメーション化する必要があるプロパティと条件を指定するだけです (さまざまなセレクターを使用)
  • さまざまな方法で遷移をトリガーできます。
    1. 擬似クラス化された :hover、:active などの CSS のプロパティの変更 (純粋な CSS UI の作成)
    2. さまざまな目的でさまざまなクラスのプロパティを変更します。
    3. インライン スタイルのプロパティの変更: JS と組み合わせると、アニメーションよりも強力になります。
于 2011-08-09T09:00:27.643 に答える
1

トランジションを使用すると、トランジションしたい定義済みプロパティの任意の値の間でトランジションできます。例として、リンクがホバーされてアクティブになっているときに、リンクの色を遷移させたいとします。

a {
    color: #000;
    transition: color .4s ease;
}
a:hover {
    color: #888;
}
a:active {
    color: #faa;
}

あなたは独立しています、あなたが選ぶ色。アニメーション スタイルを使用する場合は、アニメーション状態の色の値を明示的に設定する必要があります。また、通常、ホバー、アクティブの 3 つの状態の間を簡単にアニメーション化することはできません。より複雑な定義が必要です。アニメーションでこれを試してみます：

a {
    color: #000;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toDefault;
}
a:hover {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toHover;
}
a:active {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toActive;
}
@keyframes toDefault {
    to {
        color: #000;
    }
}
@keyframes toHover {
    to {
        color: #888;
    }
}
@keyframes toActive {
    to {
        color: #faa;
    }
}

現在、これには以前の状態に戻るアニメーションは含まれていません。あなたがそれを手に入れることができるかどうかはわかりません。

つまり、トランジションを使用すると、未定義のプロパティと値のセットをアニメーション化できますが、キーフレーム アニメーションは明確に定義されたアニメーションやトランジションに使用されます。

于 2014-02-18T14:49:34.727 に答える