私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。使うことなく簡単なアニメーションを行うことができます。アニメーションを制御し、少しのコードでより優れたものにすることができます。トランジションの考えはシンプルです。これから、そのプロパティとその変化がどのようにアニメーション化されるかを説明します。プロパティが変更されると、ブラウザはアニメーションを描写します。必要なことはプロパティを変更することだけです。滑らかなトランジションはブラウザによって行われます。3秒間アニメーション化します。変更は3秒間でアニメーションされます。下のボタンをクリックして、背景をアニメーションさせてみてください。順番で一緒に宣言できること、複数のプロパティを一度にアニメーションすることができることに留意しておいてください。アニメーションします。'red';};</script>ではアニメーションのプロパティを1つずつ見ていきましょう。アニメーションするプロパティの一覧を記載します。すべてのプロパティがアニメーションできるわけではありませんが、それらの多くが可能です。どのくらいの長さアニメーションをするかを指定することができます。遅延を指定することができます。指定した場合、アニメーションはある変更の1秒後に始まります。その場合、アニメーションは途中から始まります。場合、アニメーションは1秒を取り、半分から開始します。それによりアニメーションを開始しています。始めることも可能です。使って、例えば、現在の秒数に対応する正確な数値から始めることができます。現在の秒数からアニメーションが始まります。追加の行でそれをしています。stripe.classList.add('animate');};transition-timing-functionタイミング関数はアニメーションプロセスが時間と共にどのように広がっていくかを記述します。始まりその急速に進む、またはその逆もありえます。これは一見すると最も複雑なプロパティです。時間をかけて見れば、非常に簡単のものになります。ベジェ曲線またはステップです。頻繁に使われる曲線から見ていきましょう。