css3 主要可以分为几个模块：边框和背景，渐变，文字特效，字体，2D/3D转换，动画(过渡动画和动画)，选择器，盒模型，多列布局，用户界面。

css3动画有2类：一种是transition的，另一种是@keyframes的。

两者的区别就是，transition的动画表达是从一种状态到另一种状态，而@keyframes更加灵活，一个动画可以在不同进度表现成不同的状态。

当然，如果从操作的对象进行分类（就我目前接触的而言），我想可以分3种，一种是html元素，一种是svg的，还有就是sprites的。

最佳的入门选择就是transition。

transition意思是过渡，可以理解成从一种状态变成另一种状态。

这些状态包括很多，我自己没整理出来，暂时引用一下别人整理到的Transition 所支持的css属性.

像transition这个属性，我们经常用hover与它搭配，写好hover前后的变化，加上transition属性就可以让他们过渡了。

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name 规定需要绑定到选择器的 keyframe 名称。。

• animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

• animation-timing-function 规定动画的速度曲线。

• animation-delay 规定在动画开始之前的延迟。

• animation-iteration-count 规定动画应该播放的次数。

• animation-direction 规定是否应该轮流反向播放动画。

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

链接: https://www.fly63.com/article/detial/8603