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);括号内的数字代表第几个元素。