最近在学习饿了么vue的demo，接触到了挺多css3动画，之前有学习过，但更多是需要了就拿出来看看，直接上手用，今天来对三种动画属性进行系统学习。
css3アニメーションには、主に変換、遷移、およびアニメーションが含まれます。
違い
- 移行：CSS属性値が特定の時間間隔内でスムーズに移行できるようにします。cssプロパティを時間の経過とともに変更するには、イベント（ホバーイベントまたはクリックイベント）をトリガーする必要があります。
- アニメーション：時間をトリガーせずに、要素cssの属性値を時間とともに表示的に変更して、アニメーション効果を実現することもできます。
アニメーション
属性
1.アニメーション名：アニメーションの名前を定義するために使用されます。ここでの名前は@keyframesの名前と同じである必要があります。2
。アニメーション期間：アニメーションを再生する要素の期間を指定します。単位は次のとおりです。 、デフォルト値は次のとおりです
。03。Animation-timing-function：アニメーションの再生方法
- イーズ:(徐々に遅くなります）デフォルト値、イーズ関数はベジェ曲線（0.25、0.1、0.25、1.0）と同等です
- 線形:(均一速度）、線形関数はベジェ曲線（0.0、0.0、1.0、1.0）と同等です
- イーズイン:(加速）、イーズイン関数はベジェ曲線（0.42、0、1.0、1.0）と同等です
- イーズアウト:(減速）、イーズアウト関数はベジェ曲線（0、0、0.58、1.0）と同等です
4. Animation-delay：要素アニメーションの開始時間、つまり、要素属性値を変更した後にアニメーション効果を開始する時間を指定します。単位は次のとおりです。s、デフォルトは0
です。5。animation-iteration-count：アニメーションを再生する要素のループ数を指定します。デフォルトは1、無限：無限にループします。6。animation
-direction：方向を指定します。要素アニメーションの。デフォルト値は：normal、アニメーションの各ループは順方向に再生されます。別の値は：alternate、アニメーションは偶数回順方向に再生され、アニメーションは奇数回逆方向に再生されます。
7、animation-play-state：要素アニメーションの再生状態を制御します。2つの値：runningとpaused。runningがデフォルト値です。
キーフレーム
指定された期間のアニメーションをより細かく分割するキーフレーム
@keyframes animationname {
keyframes-selector {
css-styles;
}
}- .animationname：アニメーションの名前を宣言します。
- keyframes-selector：アニメーションの長さを分割するために使用され、パーセンテージの形式、または「from」と「to」の形式を使用できます。「from」と「to」の形式は、0％と100％に相当します。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>キーフレームは理解しにくいため、w3schoolのケースを使用して@keyframesルールを分析します。リンクをクリックすると、特定の効果を確認できます。
キーフレームはフラッシュに似ています。各時間のパーセンテージはフラッシュ内のすべてのフレームと同じです。ただし、フラッシュではすべてのフレームとフレームのアニメーション効果の比較が必要であり、要素cssの属性値を変更するにはキーフレームが時間とともに変化します。パーセンテージアニメーション時間の何パーセントが変化するかを指します。
この場合：animation:mymove 5s infinite;アニメーション名はmymoveに設定され、継続時間は5秒で、無限にループします。
次に、キーフレームのパーセンテージ（0％、25％、50％、75％、100％）は（0s、1.25s、2.5s、3.75s、5s）に対応します。
- 実行が0に達すると、top：0px; left：0px; background：red;
- 実行が1.25秒に達すると、top：0px; left：100px; background：blue;
- 実行が2.5秒に達すると、上：100px、左：100px、背景：黄色、
- 実行が3.75秒に達すると、上：100px、左：0px、背景：緑、
- 実行が5秒に達すると、top：0px; left：0px; background：red;
アニメーションプロセス全体で、アニメーションの背面が前のプロパティ値を上書きします。アニメーションが終了すると、スタイルはデフォルトの効果に戻ります。cssスタイルの各パーセンテージには、アニメーションのグラデーションプロセスがあり、要素が絶えず変化する効果を実現できるようになっています。