一、前言
目前前端其实都是力求简洁优雅的，所以对动画效果的要求并不大，一般常见的动画开源库就足够我们使用了。
不过有时候适当加一些小的动画效果也非常不错，不管怎么说，多知道一点总是好的。
css有专门设置动画的属性，也就是animation，但个人觉得它还是比较麻烦了，很多时候其实使用transition属性就能实现一个简单的动画。
除此之外还有
transform，也就是变形的意思，但这种就用的更少了，至少我目前所写的数个前端页面中是用到这玩意的，所以这里就不再介绍了。
二、transition
严格来说transition并不是动画，而是如它的意思“过渡”，只不过这个过渡效果很多时候就已经足够做一些简单、响应式的动画了。
比如一个简单的例子：
你只需要将一个标签中想要变化的属性添加在其后几个，然后紧跟变化的时间，那么此后一旦该属性发送变化，就会触发这个效果。
比如以上图为你，我设置了其宽度为100px，然后通过transition为width添加过渡效果，持续时间为1s。
那么当我鼠标悬浮该标签、将其宽度设置为200px时，它就会在1s内从100px过渡到200px，同时恢复时也是同理。
除了填过度属性、时间外，你还能更改它的变化曲线、延迟时间等，更多内容可以参考官方文档transition。
只不过我个人用的最多的便是上面这种用法，主要就是图它的简单，如果你想要实现更加复杂、高级的动画效果，建议你选择后面的animation。
比如本网站当你切换黑夜、白天主题时，就能看到颜色并不是突兀的瞬间变化、而是有一个短暂的过渡过程，用到的也就是该属性，只不过这里添加的是背景色属性。
三、animation
transition虽然简单，但问题是需要主动去触发才行。
虽然等后面学了js这并不是个问题，但animation却能更加方便的实现自动播放功能，并且还能实现一些其它更加强大的动画效果。
animation的基础在于一个叫做关键帧的东西，也就是keyframe，它可以让我们定义一个动画要执行的所有流程。
直接举个例子：
此时它不再需要我们手动去触发，并且可以自行反复执行动画。
其属性比较多，如果想要详细研究，可以参考官方文档animation，我这里直接给大家一个快速入门它的方法：
- 定义关键帧
- 使用
animation使用动画帧，再配合一些属性就可完成一个基本的动画
首先是第一步，关键帧：
@keyframes DivSizeChange {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
为了好看，我去除了一些代码，关键帧是通过@keyframes进行定义的，其后紧跟该动画帧的名字，比如这里的DivSizeChange就是我随便取的名字。
然后就是后面大括号中的内容，你可以写任意多从0-100%的比例值来定义动画到该值时要变哪些属性。
0-100你可以将其看作是一个动画的执行进度条，你只需要在进度条的某个点定义该动画到这个点后，要更改的属性即可。
比如上面的代码中只定义了初始点0以及末尾点100的属性宽度变化，这种情况下其实和前面的transition差不多。
但它强就强在你可以在中间定义多个变化点。
定义好关键帧后，我们就来到了第二部，用animation属性使用动画帧。
你就只需要在你想要使用该动画的标签中添加一个属性animation，让其使用我们定义的动画帧名字DivSizeChange即可。
animation本身的属性较多，如果想要深入了解建议你看直接官方文档，这里我举几个你可能用的最多的用例，帮助你快速上手：
animation: DivSizeChange 2s：使用关键帧DivSizeChange，动画持续时间2s，只执行一次，且只正向变化（意思就是从进度0->100后，会直接跳回0，而不会再执行100->0的反向变化）。animation: DivSizeChange 2s infinite：infinite为无穷的意思，也就是反复执行，但依旧只正向变化。animation: DivSizeChange 2s infinite alternate;：alternate为交替的意思，也就是往返执行动画，会执行反向动画。
参数的顺序一般来说是无所谓的，但建议你按照上面这个顺序写、或者查看官网的写法。
