ステップ
では、アニメーションあなたがこのSTPEを追加した場合（アニメーションをジャンプ）を使用する立方ベジェを追加しません
私たちは、最初のステップの前に設定されていないアニメーションを見てアニメーションが非常に滑らかで遷移し、それが徐々に次の色に移行され、私たちが今見るものです
私たちがどのように見える一連の手順を見てみましょう。
括弧内の値は変更することができ、そして今は1を埋める、彼は色の形で単一ステップ遷移にジャンプし、0％で内部このアニメーションた、2を2つの段階転移完全に分割され、フィル
私たちは、それはあなたが色の変化が少し異なって見えるだろう見ることができ、二段階で推移し、2に記入してみてください。
塗りつぶしの数、アニメーションのスプリットより繊細な、私たちは10を埋めるように見えるが、それはジャンプアニメでどのくらいの塗りつぶし、どんなに大きいです
それは何が最後の背後にある意味ですか？実際には、二つの値の後ろに充填することができます
髪の開始端があります。
観察力の鋭い学生は、我々は（1、エンド）を使用するときに、最後の黄色が表示されていないことがわかりますことがあります
その後、我々は最終的に黄色を見ることができ、どのような種類に見始めます。しかし、スタートを交換し、緑の直接表示の0％の赤、25％を見るようになりました
終了と開始、および要約文または2の間の差
終了：このアニメーション時間の終わりまで、現在のフレームをキープ
バックに追加された転送（100％保持状態）を添加することができる、あなたは上見ることができます
スタート間違っ内部では、それはの終わりです
開始：このアニメーション時間の終わりまで、次のフレームを保持するために、
見ての比較をしてみましょう
終了：このアニメーション時間の終わりまで、現在のフレームをキープ
（私たちが最初のフレームではなく、最後のものを見ることができ、現在のフレームをキープ）
開始：このアニメーション時間の終わりまで、次のフレームを保持するために、
（次のフレーム予約、我々は最初のフレームがで最後のものではない見ることができます）
foewardsを終了するために追加されました（最後のリザーブ状態）
タイピング結果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
@keyframes run {
0%{
left: 74px;
}
10%{
left: 90px;
}
20%{
left: 107px;
}
30%{
left: 123px;
}
40%{
left: 141px;
}
50%{
left: 158px;
}
60%{
left:175px;
}
70%{
left:192px;
}
80%{
left:209px;
}
90%{
left:226px;
}
100%{
left:74px;
}
}
.wrapper{
width:300px;
height: 50px;
}
.wrapper .text{
text-align: center;
line-height: 50px;
letter-spacing: 1px;
}
.wrapper .baffle{
width:155px;
height:20px;
background-color:white;
position: absolute;
top: 17px;
animation: run 10s steps(1, end) infinite;
}
.baffle::after{
content: "";
width: 2px;
height: 20px;
background-color: #000;
position: absolute;
left: 0px;
top: -1px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="text">屏幕前的你真的很帅</div>
<div class="baffle"></div>
</div>
</body>
</html>
钟表效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
@keyframes second{
0%{
transform: rotate(180deg);
}
100%{
transform: rotate(540deg);
}
}
@keyframes minute{
0%{
transform: rotate(90deg);
}
100%{
transform: rotate(450deg);
}
}
.wrapper{
margin:100px auto;
width:512px;
height: 512px;
background-image:url('../ing/clock.png');
position: relative;
}
.wrapper .hour{
position: absolute;
top: 240px;
left: 238px;
transform: rotate(180deg);
transform-origin: center 16px;
}
.wrapper .minute{
position:absolute;
top: 240px;
left: 239px;
transform: rotate(90deg);
transform-origin: center 16px;
animation: minute 3600s steps(60, end) infinite;
}
.wrapper .second{
position:absolute;
top: 180px;
left: 248px;
transform: rotate(180deg);
transform-origin: center 76px;
animation: second 60s steps(60, end) infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<img class="hour" src="../ing/hour.png" alt="">
<img class="minute" src="../ing/minute.png" alt="">
<img class="second" src="../ing/second.png" alt="">
</div>
</body>
</html>
跑马效果：
