前言
实际上在大前端工作中,很多动画都不用自己手动实现,很多组件已经有了自己的动画,但是奈何面试会考,于是记录一下 css 动画如何使用,有个印象。
keyframes关键帧
要想记住一个概念关键字,最好用的方法就是记住它的中文意思,关键帧,我们都知道动画是一帧一帧实现的,两者关联有了你就记住 keyframes 关键帧是用于 css 实现动画使用的了。
-
@keyframes changeBack ,右边的 changeBack 就是关键帧的名字,我们想要做个修改背景颜色的动画。
-
在关键帧动画中,我们可以设置属性的状态,用百分比来表示动画进行的时间,以下就表示一开始背景是红色,最后的时候背景是蓝色,表示从红色到蓝色转变的动画。
<style>
@keyframes changeBack {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
</style>
使用关键帧
我们创造了关键帧,总得有消费者使用吧,于是我们创建一个div标签来使用它。
使用的时候用的是 animation,动画的意思,也很好记,然后把关键帧的名字和动画的时长放上去,我们搞个5s方便观察。
<style>
@keyframes changeBack {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
#box {
width: 100px;
height: 100px;
animation: changeBack 5s;
}
</style>
<body>
<div id="box"></div>
</body>>
多段关键帧
我们不止可以在开头和结尾搞关键帧,关键帧可以有很多个。
另外 0% 和 100% 可以用 from 和 to 来代替。
<style>
@keyframes changeBack {
from {
background-color: red;
}
33% {
background-color: yellow;
}
66% {
background-color: green;
}
to {
background-color: blue;
}
}
#box {
width: 100px;
height: 100px;
animation: changeBack 10s;
}
</style>
<body>
<div id="box"></div>
</body>>
动画运行次数
我们发现运行到最后我们的盒子又没有颜色了,因为我们动画只运行了一次,结束之后,动画消失,我们的盒子一开始没有颜色,所以结束也没有颜色,我们可以设置次数,让动画运行多次或者一直运行。
只要在 animation 设置秒数之后设置次数即可。
当然最常用的还是一直运行,infinite,无限次数。
<style>
#box {
width: 100px;
height: 100px;
/*表示运行两次*/
/*animation: changeBack 5s 2; */
/*表示无限次运行*/
animation: changeBack 5s infinite;
}
</style>
尾言
animation还存在其他设置,比如动画的运行周期效果(先快后慢、先慢后快等等),动画启动前的延迟时长、动画反向运行、动画结束时的样式等,本文就不全部介绍了,遇到对应需要的使用场景再去找对应的属性设置方法,更利于记忆。
如果觉得文章对你有帮助的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~