すぐに2020年に、少しの友人はまだ今年のCSS3アニメーションを学んだ知りませんか？
CSSアニメーションを言えば（一方で、開発者のほとんどがそうするように、JavaScriptのアニメーションを使用することに慣れている以下のCSSアニメーションで、同社は、より多くの排他的なCSSアニメーションを学ぶために多くのプログラマをリードしてきました一因、やることは非常に恥ずかしいです少なくとも私は）でしたが、あなたが本当にCSSアニメーションを学ぶ際のフロントエンドエンジニアは、CSSアニメーションは、マスターCSS3呼び出すことはできません理解していない、実際には、あなたは、コードの量を削減し、パフォーマンスを向上させることができ、その魅力に惹かれます。
彼はあまり話をしなかった、と私はすぐに、今日のヒーロー学ぶために行ってきました移行を今すぐ！
遷移文法
| 値 | 説明 |
|---|---|
| 遷移期間 | トランジション効果は、完了するまでに何秒かミリ秒を指定する必要があります |
| 遷移プロパティ | 指定されたCSSプロパティ名、トランジション効果 |
| 遷移タイミング機能 | トランジションエフェクトを指定し、回転速度曲線 |
| 遷移遅延 | トランジション効果の始まりを定義する場合 |
名前が示すように中国語に翻訳遷移が、彼の文法を学ぶために一緒にしてみましょう、ディスプレイを隠し、などいくつかのズームとして、遷移アニメーションを行うための移行の意味に設計されています。
遷移期間：完全指定する方法を何秒かミリ秒効果を移行
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
}
div:hover{
height:150px;
width:150px;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）この移行は、最も基本的な使い方、あるtransition-durationアニメーションを実行するのに必要な時間、このコードは、マウスが移動し、幅と高さのdivはなっていることを意味します150px
遷移プロパティ：、トランジション効果をCSSプロパティ名を指定します。
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-property:width;
}
div:hover{
height:150px;
width:150px;
}このtransition-property値は唯一のためのものだけ幅、あるwidthアニメーションを追加し、それはまた、交換した場合、この効果が表示されますheight、それは高いアニメーションだけになります。
私たちは、最初のケースは、私たちが書いていないことがわかったtransition-propertyが、例widthやheight特性があるため、同じ時間変化で、それがされているtransition-propertyデフォルト値をall、彼らは、つまり、すべての変更は、アニメーション実行されます。このプロパティを記述しないでください。
遷移タイミング機能：速度曲線指定トランジション効果
div{
width:100px;
height:50px;
background:#f40;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
div:hover{
width:250px;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）transition-timing-function効果は、各フレームでアニメーションの速度を変更することです。ここtransition-timing-functionだけの値を示すease-in-outアニメーション効果があると理解することができます慢-快-慢。その他、あなたが理解するには、次の表を参照することができないように。
| 値 | 説明 | スピード |
|---|---|---|
| リニア（デフォルトプロパティ） | （立方ベジェ（0,0,1,1）に等しい）は、遷移効果の所定の開始端まで同じ速度で。 | 制服 |
| 楽 | 所定のスロー次いで速い開始、および低速トランジション効果の端（立方ベジェ（0.25,0.1,0.25,1））。 | 速い - 遅い - 遅いです |
| 使いやすさで | （）0.42,0,1,1（立方ベジェ相当）開始を遅延させる所定のトランジション効果。 | 高速 - 高速 |
| 簡単にアウト | 所定の遅い遷移の終わりに（等価立方ベジェ（0,0,0.58,1））。 | スロー - 遅いです |
| 使いやすさにアウト | （）0.42,0,0.58,1（立方ベジェ相当）開始と終了を遅延させる所定のトランジション効果。 | 低速 - 高速 - 遅いです |
| 立方ベジェ（N、N、N、N） | それらの値立方ベジェ関数を定義します。可能な値は0と1の間の値です。 | カスタム |
遷移遅延：トランジションエフェクトの始まりを定義します
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-delay:1s;
}
div:hover{
height:150px;
width:150px;
}ここにtransition-delayある1sアニメーションは1秒の遅延の後に実行されます意味。
今日は4つのプロパティ値の合計を学び、彼らが属するtransition不動産、プロパティ値は、ここで与えられているtransition速記の方法。
遷移：プロパティ時間タイミング機能遅延;
div{
transition:all 1s ease-in-out 2s;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）そこでここでは1秒、アニメーションのうち遅いジョギングに参加しているすべてのプロパティの意味であり、2秒後に開始しました。
結論
上記の研究の後、私はあなたがの予備的な理解してい信じるtransition用法transitionの移行のためには良いことができませんでしたが、それだけではいくつかのクールなアニメーションを行うことができない、私は次の記事であなたに説明していきますanimation（动画）、translate（移动）だけでなく、transform（变形）フォローアップします私は、マスターCSSアニメーションに2020年に私と一緒に、それをペース！