CSS3与动效那些事儿[原创]
作为一个网页设计师或者交互设计师，懂一点动效的设计制作必定是能够给自己的工作加分的。我们做动效很多时候都是用After Effects，这一次呢，我们就试着用html和CSS3来制作一些简单的动效。
本教程使用的代码编辑器是Sublime Text 3，有兴趣的朋友可以去下载下来使用（在下强力推荐），另外，大家也可以使用其他的编辑器，比如Dreamweaver，Webstorm，记事本等。
（PS：有的时候，代码的魅力还是很大滴，希望大家喜欢手指在键盘上飞奔的赶脚）
－－－－－－－－－－－－－－－－－－我是分割线，请忽略－－－－－－－－－－－－－－－－－－－－－－
在正式开始做动效之前，在下准备给大家普及一下网页制作的基本知识（还望大神勿喷）。
主要有以下知识点：
1、html标签的使用和编写；
2、css的选择器；
3、css样式的编写；
一、HTML（超文本标记语言，说人话＝＝ 好吧，就是网页里所呈现的各个元素，比如图片，文字，视频等）
我们的网页为什么会有那么多的内容呈现给我们，正是因为有html代码，浏览器对这些html代码进行解析，才能够将代码里所表现的内容呈现在网页上。那么，这里面具体的实现的机制是什么样的呢？
html代码由一种叫做“标签”的元素所构成，什么是标签？给你们看看（网页空白处右击－显示网页源代码）
那么，大家知道什么是标签了吗？答案是——No！
好吧，我在给大家详细的解释下。看到这里面用尖括号（就是这个"<>"）包起来的东西没，这就是标签，举个栗子：<div></div>,<a></a>,<span></span>,<img />。这些东西，我们就称其为标签。大多数的标签都是成对出现的，比如div标签就是成对的；少量的是单向的，比如img标签就是单向的。
标签怎么使用呢？就像图片里的那样，把内容写在标签的两个之间，比如：<div>有人喜欢我？</div>。那么，我们写了这一句之后，如果放到浏览器里，浏览器识别出来的就是“有人喜欢我？”
OK，我们可以现炒现卖一下。看我上代码（"<!---->"表示注释的内容，起解释作用）：
<!DOCTYPE html> <!--声明文档类型为html-->
<html> <!--html标签，网页的所有内容都写在此标签内-->
<head> <!--head标签，网页的链接文件以及什么的写在这里-->
<title></title> <!--title标签，网页的标题-->
</head>
<body> <!--body标签，网页的主要内容写在这里面-->
<div>我是div标签哦</div> <!--这是div标签-->
<span>我是span标签哦</span> <!--这是span标签-->
<a href="#">我是a标签哦，我可以点击的！</a>
<!--这是a标签，是链接标签，即可以点击，href代表点击之后去往的地址，#号代表空链接-->
<img src=""> <!--这是img标签，用来给网页加入图片的，src是图片的地址-->
</body>
</html>
然后，我们把这段代码放到代码编辑器里面（注释内容也可以复制），保存，后缀名改为".html"，就可以打开了。就像这个样纸：
打开浏览器之后，是这个样纸：
那么，html的标签大家应该懂了吧，我相信聪明的设计师们一定很快就会了。但是，这个网页，好像还缺点什么，好像太单调了是吧，大家的“外貌”都一样，那么，我们应该为每一个标签设置不同的“外貌”，这时候，就要用到CSS了。
二、CSS（层叠样式表，说人话＝＝ ——好吧，就是用来给网页里的不同元素设置样式的）
要设置样式，就得选择好对象，那么，应该怎么选呢？所以，我们要说一下CSS的选择器。
CSS的选择器包括标签选择器，类选择器，ID选择器等。本教程里只涉及类选择器。
那么，什么是选择器呢？每个人都有一个名字，我们也需要给标签们加上名字，这就是选择器的作用，正是通过这些选择器，css才能根据不同的选择器为不同的标签添加样式。那么，类选择器长什么样呢？我们来看看。
<div class="one"></div>
其中的“class="one" ”就是类选择器，格式为class="类名"。
我们来看几个完整的。上代码：
<div class="you">类名为you的div</div> <!--类名的书写格式为class="类名"-->
<div class="me">类名为me的div</div>
<div class="he">类名为he的div</div>
<span class="abc">类名为abc的span</span>
我们现在写了三个div标签，一个span标签，那么，我们该怎么给他们添加样式呢？继续上代码：
<style type="text/css">
.you{ /*在CSS里，对类名的引用方式为"."(小数点)加上类名*/
color: #00f5f5; /*color属性为设置字体的颜色*/
font-size: 40px; /*font-size属性为设置字体的大小*/
}
.me{
color: #1e00ff;
font-size: 35px;
}
.he{
width: 400px;
height: 40px;
background-color: #00f5f5;
color: #ffffff;
}
.abc{
color: #000000;
font-size: 30px;
}
</style>
样式的内容要写在style标签里，并且声明type="text/css"。css里还有更多的属性等着大家去发现，我在这儿之列举了几个。OK，我们将这些代码添加进去，这样：
然后，保存，打开，看到的应该是这样：
那么，到这里，网页制作的基础我就为大家讲解完了，接下来我们就该干正事儿啦！
－－－－－－－－－－－－－－－－－－－开始CSS3与动画了－－－－－－－－－－－－－－－－－－－－－
在这一部分教程里，我们涉及到的主要知识点将会有以下几点：
1、CSS3的@keyframes 属性；
2、CSS3的animation属性；
3、CSS的定位属性；
4、CSS3的transform属性和transform-origin属性；
在讲解这些知识点之前呢，我们先来看一个简单的小动效：
看上去并不难对不？那么我们该怎么实现这个效果呢？
首先，我们来说说视频中的关键帧这东西，我们所看到的视频其实是由一幅一幅的图像经过一定的速率播放之后形成的效果，这些图像我们就称其为帧，然后，每一个关键动作，我们就称其为关键帧。
我们来分析一下这个动效就会发现，它一共包含了两个关键帧，分别是动画起始的不透明度为0的关键帧和动画结束不透明度为100的关键帧，然后，设置一个动画执行时间，就达到了这种效果。
分析完了之后，我们就可以来做了。这时候，CSS3的@keyframes就会出场了。
@keyframes是css3里用来描述动画执行过程的属性，就相当于打关键帧。它的使用方法是：
@keyframes 动画名称 { 0%{css样式} 100%{css样式} }
我们来试着写一下，看我上代码：
我们先画一个圆：
<div class="circle"></div>
它的样式为：
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #00f5f5;
}
然后，我们写动画的过程：
@-webkit-keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
这是一个透明度渐变的动画，开始的时候透明度opacity为0，结束时为100。动画名称为fadeIn。
那么，@keyframes前面的"-webkit-"是什么呢？这是对浏览器的兼容，有的代码在有的浏览器里可能显示不出效果，要想实现效果，就得需要用到兼容。
"-webkit-"代表谷歌内核的浏览器，比如Chrome；
"-moz-"代表火狐内核的浏览器，比如Firefox；
"-ms-"代表IE内核de浏览器，比如IE；
"-o-"代表欧朋内核的浏览器，比如Opera。
所以，在这里用到的兼容是对谷歌浏览器的兼容。大家可以根据自己的浏览器需要选择不同的兼容方式。
那么，动画的过程写好了之后，我们就需要把这个动画给用起来。怎么用，这就需要css3的animation属性了。它的使用方法是：animation: 动画名称 执行时间 执行效果 延迟时间; 这样看起来很抽象对吧，我们来看看实际的代码：
-webkit-animation: fadeIn 1s ease-in-out;
前面的"-webkit-"同样是兼容，调用的动画为fadeIn，时间1s，效果为平滑出入，不延时。
OK，我们把代码放到编辑器里，去看看是否实现了呢。
然后，保存，到浏览器里查看，不出意外的话，这个效果是不是就实现了呢？很简单对不对，聪明的你们一定马上就会了。
－－－－－－－－－－－－－－－－－－－－－提升一下难度－－－－－－－－－－－－－－－－－－－－－－
接下来，我们来看一个稍微复杂一点的动效：
是不是感觉有点难度了？这一次涉及到了两个元素的动画，我们需要分别对它们设置动画效果，同时，我们会涉及到一个css里的定位的概念。
我们先说一下定位的概念。在css里，在父级元素没有设置定位方式的情况下，设置了绝对定位的元素将会相对于浏览器可视窗口进行定位。什么意思呢？就是说，如果，我的某个网页元素设置了绝对定位，同时，它的上一级元素又没设置其他的定位方式，那么，这个元素将会以浏览器可视窗口为参照物进行定位。
我们来举个栗子吧：
先画一个圆形和一个圆角矩形：
<div class="circle"></div>
<div class="rectangle"></div>
为它们设置样式：
.circle{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #00f5f5;
}
.rectangle{
width: 200px;
height: 100px;
border-radius: 10px;
background-color: #00f5f5;
}
我们现在没有设置任何定位，那么，我们现在来看看在浏览器里的效果。
现在的效果是这样对不对，和我们当初想要的效果似乎有点差异，我们需要把圆形移到右边去，同时，还需要把圆角矩形往下移动一点，这时候就需要用到绝对定位了。
设置了绝对定位的元素，就有了top，right，bottom，left四个属性。可以分别对这四个属性设置值来进行定位。我们要知道，网页的坐标轴原点是在网页的左上角的，就像这样：
那么，我们现在来给他们设置定位。
.circle{
position: absolute;
left: 180px;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #00f5f5;
}
.rectangle{
position: absolute;
top: 60px;
width: 200px;
height: 100px;
border-radius: 10px;
background-color: #00f5f5;
}
设置了定位之后，我们让圆形距离左边180px，让圆角矩形距离顶部60px，然后，你看：
很简单的，我们就达到想要的效果了吧。OK，我们现在来实现动画。
首先来分析一下：
圆形：从开始到结束，位置关键帧三个：开始的时候一个，最左边的时候一个，结束的时候一个（模拟了
惯性的作用）；
圆角矩形：缩放关键帧三个，开始的时候一个，最大的时候一个，100%大小的时候一个，另外，还有透明
度关键帧两个。
分析完毕，我们就可以来设置动画了：
@-webkit-keyframes slide {
0%{
left: 230px;
}
80%{
left: 170px;
}
100%{
left: 180px;
}
}
@-webkit-keyframes scale {
0%{
-webkit-transform: scale(0);
opacity: 0;
}
70%{
-webkit-transform: scale(0);
opacity: 0;
}
90%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(1);
opacity: 1;
}
}
然后，我们调用动画：
圆形：-webkit-animation: slide 1s ease-in-out 1s;
圆角矩形：-webkit-animation: scale 1.1s ease-in-out 1s;
圆形的动画名称我们取为slide，圆角矩形的我们取为scale。
我们用到了一个transform属性，这就和PS里对图层使用了变换的效果一样，transform里也有各种变换，比如缩放，旋转，扭曲等。
我们把代码放进代码编辑器，去看看效果呢
我们看到的效果是不是这样呢：
那么问题来了，为啥圆角矩形缩放的方式有点怪呢？没有从右上角缩放对吧。
怎么弄呢？我们就谈谈css3的transform-origin属性，给对象设置变换基点。就是设置这个的：
所以，我们要让圆角矩形从右上角缩放，就只需要把基点设置到右上角就行了。
我们在圆角矩形的css里加上一句这个：
-webkit-transform-origin: right top;
然后，我们再去看效果：
是不是就和我们当初想要实现的效果一样了呢。
总结一下，其实，用css3来实现这些效果难度并不是很大，只需要大家有足够的耐心去调试这些代码。当然，本教程只是列举了css3里很小的一部分代码，供大家入门使用。希望大家能够发现更多酷炫的动效。
第一次写教程，还希望大家多多支持哦！
