steps
Click to view the steps small demo
With animation to use (Jump animation) If you add this stpe will not add cubic-bezier
We first look at the animation is not set before the steps is what we see now transition animation is very smooth, and it is gradually transition to the next color
Let us look at a set of steps look like.
Value inside the brackets can change, and now we fill 1, he was at 0% this animation inside to jump in a single step transition in the form of a color, fill 2 is divided into two steps transition complete
We try to fill in 2, it was a transition in two steps, you can see the transition of color will appear a little different.
The greater the number of fill, animated split the more delicate, we look to fill 10, but no matter how much fill, it is a jump animation
There behind the end what does it mean? In fact, behind the two values can be filled
There are hair start end
Observant students may find that when we use (1, end) will find that you do not see the last yellow
Then we start to look into what kind, can see the final yellow. However replaced start, began to see the 0% red, 25% of the direct display of green
The difference between end and start, and summary sentence or two
end: Keep the current frame until the end of this animation time
May be added added forwards (100% retention state) in the back, you can be seen on
Inside the start wrong, it is the end of
start: to retain the next frame until the end of this animation time
Let's make a comparison to see
end: Keep the current frame until the end of this animation time
(Keep the current frame, we can see the first frame, not the last one)
start: to retain the next frame until the end of this animation time
(Reserved next frame, we can see the first frame is not the last one in)
Was added to end foewards (a last reserved state)
Typing results:
<!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>
跑马效果：
