CSS微动画 - 为了不依赖套件，所以要自己来！

Q: 很多免费的现成的套件可以直接套用就有效果，拿来用吧？
A: 真的有比较好用吗？

网页的组成离不开html的架构及css的样式，除了放上会动的图片之外，css提供多种属性可以让元素有动态效果，让你的网页不再只是死板板没有互动感。网路上有许多css相关的套件，只要加上class就可以让元素有动态效果，如果团队从一开始就有使用特定套件的习惯，会是非常方便的选择，同时也省去很多写效果的时间！

还没有找到说服自己用css套件的理由

但不论是小编的团队或是个人开发，若不是用Angular做大型专案开发，就是简易的多页式展示网站，对於套件(库)的选用是能不使用第三方套件就绝对不会把套件引进专案的！秉持这样的信念，想要的效果都自己写。毕竟以大型专案来说，可以依赖的套件是越少越好；以简易的展示网站来说，也没有使用套件的必要。当然最後还有一个很重要的原因是当作练功，别人写得出来的效果，自己也是可以写写看的！

为了自己的信念，加强技术是很重要的！

接下来的文章将会介绍各式各样的「微动画」，透过操作css的属性，并且在部分文章中会搭配javascript做实际应用，让网站看起来更有质感。另外本系列会针对操作动态效果的css属性特别做介绍，其余如height、position、margin等等比较基础的css属性就不另外说明。

操控CSS是有成本的！

制作「微动画」时操控的css属性不同，所需的渲染成本也会不一样，系列的最後会特别说明如何选用要操控的css属性，可以将渲染的成本最小化。

Day	名称	示意图
Day 1	CSS微动画 - 为了不依赖套件，所以要自己来！
Day 2	CSS微动画 - 先了解将使用的属性是很重要的！transform & transition	-
Day 3	CSS微动画 - 为什麽别人的按钮点起来比较有感觉？
Day 4	CSS微动画 - 按钮效果只有一种太单调啦！
Day 5	CSS微动画 - 善加利用伪元素可以做出更多变化
Day 6	CSS微动画 - 开关按钮也要美美的
Day 7	CSS微动画 - 不使用图片制作「加到最爱」开关按钮
Day 8	CSS微动画 - 弹出来的选单 Part.1
Day 9	CSS微动画 - 弹出来的选单 Part.2
Day 10	CSS微动画 - 了解Animation并做出更多效果吧！
Day 11	CSS微动画 - Loading来了！转啊转啊～
Day 12	CSS微动画 - Loading来了！七彩霓虹灯
Day 13	CSS微动画 - Loading来了！九宫格可以很多变化
Day 14	CSS微动画 - Loading来了！时钟转转转
Day 15	CSS微动画 - Loading来了！终於要出款文字版本的了！
Day 16	CSS微动画 - Loading来了！小精灵？这个小家伙吃蛋
Day 17	CSS微动画 - 不知道要吃什麽？Slot帮你选吧
Day 18	CSS微动画 - Slot的变化！数字钟也可以动起来
Day 19	CSS微动画 - 倒数计时，绘制圆饼图！
Day 20	CSS微动画 - 动起来番外篇！谈谈Animation的Step
Day 21	CSS微动画 - 图片不裁切，纯css实现分格淡出
Day 22	CSS微动画 - 弹窗也要很动感，动画不能只做一半
Day 23	CSS微动画 - Loading又来了！文字版再出击～
Day 24	CSS微动画 - Animation也会影响网页效能？
Day 25	CSS微动画 - Animation会影响网页效能！	-
Day 26	CSS微动画 - 卡片简约动态效果，低调的小心机
Day 27	CSS微动画 - 卡片简约动态效果，翻转是另一种感觉～
Day 28	CSS微动画 - 手机版下拉选单，两种效果可以选
Day 29	CSS微动画 - Transform不一定是位移的最佳选择
Day 30	CSS微动画 - 有始有终！心得跟最後动画分享