steps
配合animation來使用的（跳轉動畫）如果添加了這個stpe就添加不了cubic-bezier
我們先來看一下沒設置steps前的animation是什么樣子的，我們看到現在過渡動畫是很流暢的，也是漸漸過渡到下一個顏色的
我們再來看一下設置了steps的樣子。
括號里面的值是可以變動的，現在我們填入1，他是在0%這段動畫里面，以跳轉的形式一步過渡完一個顏色，填入2就是分成兩步過渡完
我們試試填入2，它是一次分成兩步過渡的，可以看到會出現過渡的顏色有點不同。
填的數越大，拆分的動畫也就越細膩，我們來看看填入10，但是不管填多少，它都是跳轉動畫
還有后面的end是什么意思呢？后面其實是可以填兩個值的
end還有發start
細心的同學可能會發現，當我們使用（1，end）的時候會發現看不到最后的黃色
那我們就換成start來看看什么樣，是可以看到最后的黃色的。但是換成start，開始就看不到0%的紅色，直接顯示25%的綠色
end和start的區別，總結兩句話
end：保留當前幀狀態，直到這段動畫時間結束
可以添加在后面添加forwards（保留時的100%狀態），就可以看到了
里面的start寫錯了，是end的
start：保留下一幀狀態，直到這段動畫時間結束
我們來做個對比看看
end：保留當前幀狀態，直到這段動畫時間結束
(保留當前幀，我們可以看到第一幀在，最后一幀不在)
start：保留下一幀狀態，直到這段動畫時間結束
（保留下一幀，我們可以看到第一幀不在，最后一幀在）
給end添加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>
跑馬效果：
<!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: 0;
}
100%{
left:-2400px;
}
}
.wrapper{
width:200px;
height:100px;
margin: 200px auto;
position: relative;
overflow: hidden;
}
.wrapper .horse{
position: absolute;
top: 0;
animation: run 1s steps(12, end) infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<img class="horse" src="../ing/horse.png" alt="">
</div>
</body>
</html>