css3的动画属性

A.css3的动画属性

1、animation-name属性

animation-name属性：定义动画名称，用于指定由规则定义的动画的一个或多个名称。
animation-name属性必须与规则@keyframes（关键帧）配合使用，因为动画名称是由@keyframes（关键帧）定义声明的，如果提供多个属性值用逗号隔开。

   2、animation-duration属性

animation-duration属性用于指定执行一个周期动画应该花多长时间。

	3、animation-timing-function属性

animation-timing-function属性是用来设置播放方式的（匀速、加速度、减速度、贝塞尔曲线）。
　　4、animation-delay属性是用做于动画的延迟效果。
　　5、animation-iteration-count
　　表示动画运动的次数（默认情况下运动一次） infinite（无限循环）。
　　6、animation-direction属性表示运动的方向
　　属性值：
　　 reverse：反方向运行（让关键帧从后往前执行）
　　 alternate：动画效果先正常运行再反方向运行，并且交替运行。
　　 alternate-recerse：动画效果先反方向运行再正常运行，并且交替运行。
　　7、animation-play-state属性：
　　 属性值：paused：暂停；
　　 running：运动。
　　
B.css3 3d旋转图片立方体特效代码
1、css3旋转:transform:rotate(deg) （deg表示旋转角度);
rotate(deg)：效果表示整体向一个方向旋转，若deg为正值，则顺时针旋转，若为负值则按逆时针旋转。
rotateX(deg):效果表示按横向的X轴旋转。
rotateY(deg):效果表示按纵向的Y轴旋转。
rotateZ(deg):效果与rotate(deg)相同，rotateZ(deg)为旋转默认值。
2、css3位移: transform：translate(px); 位移值用px 百分比都可以；
translate(px):默认值，跟随X轴位移。
translateX(px)：跟随X轴位移；
translateY(px)：跟随Y轴位移；
translateZ(px)：跟随Z轴位移；

C.H5新特性之语义化标签:
section:类似于div，section更偏向于划分区域，代表某一个区域，分区，页面或者文档的一部分区域。
article：更偏向于内容的展示，可以是文章、blog、帖子、短文或者回复、评论；
aside：在一边、一旁的，侧边；
header：表示内容的头部，网页的头部，头部区域；
footer：表示内容的底部，网页的底部，底部区域；
nav：导航区域；
figure：图像区域：可以包含多个图片或者一个figcaption，figcation用来表示图片标题；
figcaption：figure的标题（一般放在figure的第一位或者最后一位）；
main：主体内容(IE不兼容);
hgroup:专门用来包含标题h标签的分组;
mark:高亮显示，背景默认黄色（可以更改背景，内联元素）；
time：顾名思义，用来放时间的；
dialog:类似微信对话框（默认display：none 默认定位、边框）；

D.css3选择器：
1、动态伪类：
E :link 链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接锚点上。
E：visited 链接伪类选择器
选择匹配的E元素，而且元素被定义了超链接并已被访问过，常用于链接锚点上。
E：active 用户行为选择器
选择匹配的E元素，且匹配元素被激活，常用于链接锚点和按钮上。
E:hover 用户行为选择器
选择匹配的E元素，且用户鼠标停留在E元素上，IE6及以下浏览器仅支持a:hover。
E:focus 用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点。
2、状态伪类：
E：enabled：
匹配所有用户界面（form表单）中处于可用状态的E元素。
E：disabled：
匹配所有用户面（form表单）中处于不可用状态的E元素。
E：checked：
匹配所有用户界面（form表单）中处于选中（单选、多选）状态下的元素E。
E::selection：
匹配E元素中被用户选中或处于高亮状态的部分。

3、结构性伪类：
如果子集标签类型一致（类名）的情况下，采用 child
			1：选择符：first-child{   }。
			2：选择符：last-child{   }。
			3：选择符：nth-child（val）{   }
			val：可以是某个数值，表示第几个
			2n或者even表示偶数
			2n+1或者odd表示奇数。
			4：选择符：nth-last-child(  ) {   }表示倒数第几个。
			5：选择符：only-child{   }但前子集只有一个元素的时候才会被选择。
			
如果子集标签类型不一致（类名）的情况下，采用 of-type     of-type先确定类型，把不同类型的先剔除，剩下同类进行选择。
			1：选择符：first-of-type{   }。
			2：选择符：last-of-type{   }。
			3：选择符：nth-of-type（val）{   }
			val：可以是某个数值，表示第几个
			2n或者even表示偶数
			2n+1或者odd表示奇数。
			4：选择符：nth-last-of-type(  ) {   }表示倒数第几个。
			5：选择符：only-of-type{   }但前子集只有一个元素的时候才会被选择。