写在前面
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗?
说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量、提高性能。
上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章。
话不多说,马上和我一起去学习今天的主角animation吧!
animation 语法
![2abb894de8398179d2238a337db57892.png](https://img-blog.csdnimg.cn/img_convert/2abb894de8398179d2238a337db57892.png)
animation翻译成中文是动画的意思,熟练运用之后你可以用它来做各种各样炫酷的动画。
@keyframes:定义一个动画,定义的动画名称用来被animation-name所使用。
![451ca24a37b5afe416936317eec0e7b8.gif](https://img-blog.csdnimg.cn/img_convert/451ca24a37b5afe416936317eec0e7b8.gif)
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation:mymove 2s;
}
@keyframes mymove{
0% {
width:50px;height:50px;}
50% {
width:100px;height:100px;}
100% {
width:50px;height:50px;}
}
@keyframes主要是做关键帧动画的,每个@keyframes后面都要跟一个名字,事例中使用了mymove
作为帧动画的名字,然后可以在样式内对关键帧添加样式,然后根据关键帧 @keyframes
就能自动形成流畅的动画了。