steps
点击查看steps小demo
配合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>