一文带你CSS 动画从入门到高手

文章预览

本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画。 最新版本的 CSS 动画由规范 --  CSS Animations Level 1 [1]  定义。 CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。 动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。 简单来说，看下面的例子： div  {      animation : change  3s ; } @keyframes  change {     0% {          color :  #f00 ;     }     100% {          color :  #000 ;     } } animation: move 1s  部分就是动画的第一部分，用于描述动画的各个规则; @keyframes move {}  部分就是动画的第二部分，用于指定动画开始、结束以及中间点样式 ………………………………