接了任务一直犯拖延症，一直拖到现在才开始做任务，先say 个
sorry。这篇文章主要说网页动画的，侧重的是CSS3动画。闲话不多说，那就开始吧！

一.先聊聊动画是什么吧。

动画的本质是定时器改变元素的属性，浏览器的渲染过程
动画是关于时间的函数

二、再说说动画的种类

1.Javascript 动画

DOM动画
Canvas 动画

2.CSS3动画

transition
animation

3.SVG动画

三.切入正题CSS3动画吧！

在CSS3中为我们提供了三种用来做动画的方法：transition、transform和animation。

1.transition过渡

CSS3的transition允许CSS的属性值在一定的时间内平滑地过渡。
要实现这一点，它规定了两点

规定您希望把效果添加到哪个 CSS 属性上（应用地点）
规定效果的时长（应用时间）

兼容性

transition兼容性

属性

transition-property: 设置过渡效果的css属性名。
transition-duration: 设置完成该效果的过渡时间。
transition-timing-function: 设置过度时所用的速度。
主要有的函数有：ease减速；linear匀速；ease-in加速；ease-out减速；ease-in-out先加速后减速。
transition-delay: 设置延迟时间。

实例

语法顺序是：transition: property duration timing-function delay;

// 简单例子 用于宽度属性的过渡效果，时间为3s，速度为ease，延迟时间为1s
.content{
    transition: width 3s ease 1s;
}

缺点

transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，想要使用一次，就得触发一次。
transition只能定义开始状态和结束状态，不能定义中间状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

2.transform变换

transform变换分为2D变换和3D变换，但是这里暂时只讨论2D变换。2d类的动画沿着x轴和y轴的变化，对元素进行旋转、缩放、移动或倾斜。
工作原理：

转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。

兼容性

transform兼容性

属性

transform: rotate();旋转。单位是deg,度。对此，也衍生出了rotateX()和rotateY();分别代表绕着X轴和Y轴旋转。
transform: skew();倾斜。衍生出了skewX()和skewY();分别代表绕着X轴和Y轴倾斜。
transform: scale();缩放，按倍数计算。衍生出了scaleX()和scaleY();分别代表缩放X轴或Y轴。
transform: translate();位移。衍生出了translateX()和translateY();分别代表X轴或Y轴的位移量。

实例

// transform: rotate()
//通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);      /* Firefox */
}
//transform: skew()  
//通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
}
//transform: translate()
//通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);       /* IE 9 */
-webkit-transform: translate(50px,100px);   /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);      /* Firefox */
}
//scale() 方法
//通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4);  /* IE 9 */
-webkit-transform: scale(2,4);  /* Safari 和 Chrome */
-o-transform: scale(2,4);   /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
//matrix() 方法
//matrix() 方法把所有 2D 转换方法组合在一起。
//matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}

3.animation动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
animation利用@keyframes关键帧完成动画的制作。其格式为@keyframes 动画名 {规则}。

兼容性

animation兼容性

属性

animation-name: 动画名称
animation-duration: 完成动画所需时间
animation-timing-function: 完成动画的速度函数
animation-delay: 延迟时间
animation-iteration-count: 播放次数。默认1，其中，infinite表示无限次播放。
animation-direction: 是否轮流反向播放动画。normal正常播放；alternate奇次数反向播放。

实例

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}

//keyframes
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

CSS3动画就简单聊这些吧，下面说下其他的。

四.

// CSS选择器介绍
// 阮一峰 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

// 1. 4种基本选择器

CSS 2.1

// 2. 4种多元素的组合选择器
div,p 同时匹配
div div 匹配后代
div > p 匹配子元素
div + div 匹配同级的下一个元素(仅匹配一个)

其中 div p 与 div > p的区别
前者匹配全部的后代元素，而后者仅匹配向下一层（子元素）

// 3. 4种属性选择器根据某类的属性来查找选择器
E[att]
E[att=val]

// 4. 伪类选择器实际不存在的类
E:first-child
E:link
E:lang(c)

// 5. 伪元素
E:first-line
E:first-letter
E:before

CSS 3
//

CSS 3 中的新特性
// 应该利用 CSS 3 generator生成CSS3代码(上课会讲)
border-radius 边框倒角
box text shadow 盒子阴影
transform 2D 变形
Multi Column 将文本分隔成多列
transition 动画

keyframe 动画和生成器
https://daneden.github.io/animate.css/
http://cssanimate.com/

其他 css3 生成器
http://css3generator.com/
http://www.css3generator.in/
http://css3.me/
https://www.tutorialspoint.com/css/css3_boarder_image.htm

CSS动画