CSS3动画效果标签

figure和figcaption标签都是html5语义化标签

figure用于规定独立的流内容（图表、图像、图片、代码）

figcaption与figure配套使用，用于标签定义。

transform和transition为CSS3属性。

transform主要用于元素的变形处理。属性有（translate,rotate,scale,skew,即平移，旋转，缩放，斜切)

1、Translate:指定对象的2D translate(2D平移)

第一个参数对应x轴，第二个参数对应y轴，如果第二个参数未提供，则默认为0。eg:translate(10px,10px);

2、Rotate:指定对象的2D rotate（2D旋转）

需先有transform-origin:0 0;属性（设置元素中心点）

Eg:rotate(90deg),transform-origin:0 0;（旋转角度，‘+’，‘-’分别代表顺逆时针）.

3、Scale:指定对象的2D rotation（2D缩放）

第一个参数对应x轴，第二个参数代表y轴，如果第二个参数未提供，则默认第一个参数的值。（小于一往小缩，大于一放大）

4、Skew:指定对象的skew transformation(斜切扭曲)

第一个参数对应x轴，第二个参数对应y轴，如果第一个参数未提供，则默认为0.

Eg:skew(50deg,20deg)

transition：主要用于定义元素的过渡动画处理。属性有(property,duration,timing-function,delay.)

1、Property:检索或设置对象中参与过渡的属性。

2、Duration:过度动画的持续时间（秒为单位）；

3、Timing-function:检索或是设置对象中过渡的动画类型。（linear/ease/ease-in/ease-out/ease-in-out:都是一样速度的过渡效果/慢速开 始，然后变快，然后慢速结束的过渡效果/以慢速开始的过渡效果/以慢速结束的过渡效果/以慢速开始和结束的过渡效果）

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

需要注意的点

1、在设置动画时，设置了各个标签，例如p,h2,...鼠标移上去时产生动画，应在外部容器设置，要不然就会产生一道h2时h2才会动，移到p时p才会动的后果。

2、设置背景图片时，可以先设置一个与图片颜色相似的颜色作为背景色，图片显示效果会好一些。

3、图片是放在figure内但不是figcaption内。

4、加边框的方法之一可以是加入一个空div为他设置大小和边框。

5、要加动画前，先确定初始样式，再定义鼠标放上去时的变化。

6、当想为同一标签设置不同的样式，例如p标签，可以使用伪类的方法，设置css为p:nth-of-type(1);括号内的数字代表第几个元素。