複雑なアニメーションを作成しようとしているので、次の簡単な例を作成して問題を説明しました。
次のコードは、オブジェクトを回転させ、アニメーションの50％で色を変更し、100％まで保持しようとします。私が得た問題は、オブジェクトが50％から100％に変更されると、前のキーフレーム（50 ％）、100％で再び透明になります。
私はblenderやanimateccなどのアニメーションソフトウェアを使用してきましたが、デフォルトの動作では、アクティブに別のキーフレームに変更しない限り、最後のキーフレームで設定されたプロパティの値を保持します。
backgroundプロパティを100％の赤に再度設定できることを知っています。しかし、多くの値を繰り返すことを意味する実際の複雑なアニメーションの場合、「forward」に設定されている場合にアニメーションの最終状態を保持する「animation-fill-mode」プロパティも知っているので、各ステップでそれを実行すると、希望どおりに動作しますが、機能しませんでした:(
すべてのフレームで各プロパティを繰り返す必要なしに、この問題の適切な回避策はありますか？デフォルトの動作を変更できますか？
注：各フレームにプロパティが設定されていない場合、デフォルトで初期値（0％フレーム）になると思いましたが、「transform：rotate」プロパティを50％に設定せず、デフォルトで0％に設定されていません。の値、0％から100％の間の値を補間するので、これが実際にどのように機能するのかわかりません：/、なぜこれが発生するのかについてのいくつかの説明が本当に理解されるでしょう
.test{
all: unset;
animation-name: rotate_and_change_color;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-direction: normal;
}
@keyframes rotate_and_change_color{
0%{transform: rotate(0deg);
animation-fill-mode: forwards;
}
50%{
background: red;
animation-fill-mode: forwards;
}
100%{transform: rotate(360deg);
animation-fill-mode: forwards;
}
}
1つの方法は、各プロパティを簡単に制御できる複数のアニメーションを検討することです。
.test {
animation-name: rotate, change_color;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-direction: normal;
width:200px;
height:200px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes change_color {
50%,
100% {
background: red;
}
}<div class="test">
</div>注意事項に関しては、これは最後と最初の状態にのみ適用され、値を指定しない場合、計算された値が考慮されます（最初の状態または要素のスタイルで定義された値）
0％またはfromキーフレームが指定されていない場合、ユーザーエージェントは、アニメーション化されているプロパティの計算値を使用して0％キーフレームを作成します。100％またはtoキーフレームが指定されていない場合、ユーザーエージェントは、アニメーション化されているプロパティの計算値を使用して100％キーフレームを作成します。ref
他の州では、あなたが実際にあなたが定義した値と（あなたが定義されていませんでした場合には自動的に行わ1考慮補間持っている0%とします100%）
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加