Step of CSS3

Step of CSS3

现在先用一个盒子来学习step的相关特性:

@keyframes change-color {
    0%{
        background-color: red;
    }
    25%{
        background-color: green;
    }
    50%{
        background-color: blue;
    }
    75%{
        background-color: black;
    }
    100%{
        background-color: #fff;
    }
}

div{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: change-color 4s steps(1, end);
}

运行后会发现,每两个关键帧之间,没有了中间的过渡,直接跳转了,如果将1换成2或者更大的数就会在两个关键帧直间再加一帧,传24的话就看起来是连贯动画了。

但是还会发现,最后一个关键帧不显示了,也就是没有白色的那帧,那是因为steps里面传的是end,那么endstart又有什么区别呢:

end

保留当前帧状态,直到这段动画时间结束。

所以如果想显示最后一帧的状态,并且不需要循环的话,就加一个forward属性值,最后一帧就可以显示出来了。

steps(1, end); === step-end

start

保留下一帧状态,直到这段动画时间结束。

start不显示的是第一帧,这个属性值没有end使用的多,而且没有办法去弥补缺失第一帧的这个缺陷。

steps(1, start); === step-start

用两个运动起来的盒子就可以更直观的形式展现出两个属性值的区别

@keyframes run {
    0%{
        left:0;
    }
    25%{
        left:100px;
    }
    50%{
        left:200px;
    }
    75%{
        left:300px;
    }
    100%{
        left:400px;
    }
}

.demo1, .demo2{
    position:absolute;
    left: 0;
    background-color: black;
    width: 100px;
    height: 100px;
    color:#fff;
}
.demo1{
    animation: run 4s step-end forwards;
}
.demo2{
    top:100px;
    animation: run 4s step-start;
}

image-20220216093055304

image-20220216093032406

应用

打字效果

<div>abcdef ghij</div>
@keyframes cursor{
    0%{
        border-left-color: rgba(0,0,0,0);
    }
    50%{
        border-left-color: rgba(0,0,0,1);
    }
    100%{
        border-left-color: rgba(0,0,0,0);
    }
}
@keyframes cover{
    0%{
        left:0;
    }
    100%{
        left:100%;
    }
}
div{
    position: relative;
    display: inline-block;
    height:100px;
    font-size:80px;
    line-height: 100px;
    font-family: monospace;
}
div::after{
    content:"";
    position: absolute;
    left:0;
    top:10px;
    height:90px;
    width:100%;
    background-color: #fff;
    border-left:2px solid black;
    box-sizing:border-box;
    animation:cursor 1s steps(1, end) infinite, cover 12s steps(12, end);
}

录制日期 22-02-16 1-00_00_06-2022_02_16_17_04_58

钟表效果

<div class='clock'>
    <div class="second"></div>
    <div class="minute"></div>
    <div class="hour"></div>
</div>
@keyframes secondrun{
    0%{
        transform:rotate(180deg);
    }
    100%{
        transform:rotate(540deg);   
    }
}
@keyframes minuterun{
    0%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(540deg);
    }
}
div.clock{
    position: relative;
    width:512px;
    height:512px;
    background-image: url(clock.png);
    background-size:cover;
    background-repeat: no-repeat;
}
div.second{
    position: absolute;
    left:247px;
    top:180px;
    width:16px;
    height:278px;
    background-image: url(second.png);
    background-size:cover;
    background-repeat: no-repeat;
    transform-origin:center 76px;
    transform:rotate(180deg);
    z-index: 3;
    animation:secondrun 60s steps(60, end) infinite;
}
div.minute{
    position: absolute;
    transform-origin:center 16px;
    left:238px;
    top:240px;
    width:32px;
    height:218px;
    background-image: url(minute.png);
    background-size:cover;
    background-repeat: no-repeat;
    transform:rotate(180deg);
    z-index: 2;
    animation:minuterun 3600s steps(60, end);
}
div.hour{
    position: absolute;
    transform-origin:center 16px;
    left:238px;
    top:240px;
    width:32px;
    height:148px;
    background-image: url(hour.png);
    background-size:cover;
    background-repeat: no-repeat;
    z-index: 1;
}

录制日期 22-02-16-00_00_00-2022_02_16_16_56_47

跑马效果

<div class="horse"></div>
@keyframes run{
    0%{
        background-position: 0 0;

    }
    100%{
        background-position:-2400px 0;
    }
}

div{
    width:200px;
    height:100px;
    background-image:url(horse.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    animation:run .5s steps(12, end) infinite;
}

录制日期 22-02-16 2-00_00_00-2022_02_16_17_07_17


下面是素材:

horse

clock

hour

minute

second

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值