css3动画

1.先介绍两个HTNL5语义化标签

 figure用于规定独立的流内容（图像、图表、照片、代码等等）浏览器会识别成存放图片或者其他媒体而不会认为存放文章，在程序员看来就是存放图片的标签。

figcaption，与figure配合使用，用于标签定义figure元素的标题。

这两个标签在IE9以上可以实现

具体用法：

<figure>
	<img src=""/>
	<figcaption>figcaption</figcaption>
</figure>

2.关于css3的内容

Transform属性，用于元素的变形处理。有四种属性值：translate（平移）、Rotate（旋转）、scale（缩放）、skew（斜切）

同样是在IE9以上兼容

    1.translate

        translate（  px,  px）第一个参数对应x轴第二个参数对应y轴

                                          往右边是正值，往左边时负值，往下是正值，往上是负值。

    2.Rotate控制2D旋转，有一个配合属性transform-origin

        Rotate(90deg),transform-origin:0 0;

        

            不设的时候默认为中心，设为00点的时候，元素的左上角。

    3.scale控制2D缩放，两个参数一个X轴一个Y轴，第二个参数没写时默认为第一个参数。

        参数为1时不缩放，小于1往小缩，大于1往大放。

        也可以配合origin属性

        

    4.skew两个参数一个X轴一个Y轴，第二个参数没写时默认为0。

        skew（50deg）

        

        skew（0,50deg）

        

trancition主要用于元素的过渡动画处理，也有四个参数( 兼容性在IE10以上）

1.property检索或设置对象中的参与过渡的属性

    就是选择属性的比如给background设置动画

2.duration过渡动画的持续时间

3.timing-function检索或设置对象中过渡的动画类型

    有（linear、ease、ease-in、ease-out、ease-in-out）

4.delay检索或设置对象延迟的过渡时间

3.媒体查询

通过不同的媒体类型和条件定义样式规则。

可以用在css中的@media和@import规则上，也可以被用在HTML和XML中

@media screen and (width:800px){}
@import url(example.css) screen and (width:800px);
	<link media="screen and (width:800px)" rel="stylesheet" href="example.css"/>