1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；
2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
注意：需要在 Chrome 和 Safari 上面的基础上加上 -webkit-前缀，Firefox加上 -moz- animation-duration属性 设置CSS3动画播放时间 就是元素播放动画所持续的时间长 div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; } animation-timing-function属性 设置动画播放方式 例子： animation-timing-function:ease animation-delay 动画开始播放时间 和transition-delay属性一样，定义浏览器开始执行动画之前等待的时间 animation-duration: 10s; animation-iteration-count 动画播放次数 1、其值通常为 整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为 infinite，动画将会无限次的播放。 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！ animation-direction属性 设置动画播放方向 属性值： 1、 normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是 alternate，他的作用是，动画播放在 第偶数次向前播放， 第奇数次向反方向播放。 animation-play-state属性 设置动画的播放状态 属性值： 其主要有两个值： running和 paused 其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放， 这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态 例如，页面加载时，动画不播放。代码如下： animation-play-state:paused animation-fill-mode属性 定义动画开始之前和结束之后发生的操作 属性值： 在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性 可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上 而不回到动画的第一帧上。或者同时具有这两个效果 布局样式相关 Columns 多列布局 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个 多列布局模块。它主要应用在文本的 多列布局方面， 这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现 语法： columns：<column-width> || <column-count> 例子：columns: 200px 2; //显示两栏显示，每栏宽度为200px Column-width column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候， 既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ； column-width: auto | <length> Column-count属性 用来给元素指定想要的列数和允许的最大列数 将列分成四列显示：column-count：4； Column-gap属性 列间距 Colunm-rule属性 定义列与列之间的边框宽度、边框样式和边框颜色 有点类似常用的border属性。但column-rule是不占用任何空间位置 Column-span 跨列设置 用来定义一个分列元素中的子元素能跨多少列（使莫一子元素不进行分列，横跨所有列） 盒子模型 CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body 标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响 CSS3中新增了box-sizing属性，能够事先定义盒型的尺寸解析方式 box-sizing:content-box | border-box | inherit 伸缩布局 Flexbox布局 Flexbox布局功能有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 1、创建一个flex容器任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，
.flexcontainer{ display: -webkit-flex; display: flex; } 2、Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row 3、Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4、Flex项目移动到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。
.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; } 5、Flex项目移动到左边flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } 6、Flex项目移动到右边 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; } 7、水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } 8、Flex项目实现自动伸缩您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。
.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; } Media Queries 媒体类型 使不同的终端设备的使用者有更好的体验（通过CSS3来查询媒体） 一、媒体类型 媒体引用类型 媒体类型的引用方法也有多种，常见的有： link标签、 @import和CSS3新增的 @media几种： link方法： link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法： @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法： @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。 @media引入媒体类型和@import有点类似也具有两方式 （1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head> Media Queries使用方法 @media 媒体类型and （媒体特性）{你的样式} 媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性， 第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如： (max-width: 480px) 1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如： @media screen and (max-width:480px){ .ads { display:none; } } 上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏 2.最小宽度min-width “min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){ .wrapper{width: 980px;} } 上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。 3、多个媒体特性使用Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 4.设备屏幕的输出宽度Device Width 在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率 5、not关键词使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：
@media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中 6、only关键词only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" /> Responsive设计 响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件： 网站必须建立灵活的网格基础； 引用到网站的图片必须是可伸缩的； 不同的显示风格，需要在Media Queries上写不同的样式 1、流体网格 流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。 这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放 2、弹性图片 弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情 img {max-width:100%;} 3、媒体查询 4、分辨率 屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式 5、主要断点 很重要的一个部分 简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码） Responsive布局技巧 在Responsive布局中，可以毫无保留的丢弃： 第一， 尽量少用无关紧要的div； 第二， 不要使用内联元素（inline）； 第三， 尽量少用JS或flash； 第四， 丢弃没用的绝对定位和浮动样式； 第五， 摒弃任何冗余结构和不使用100%设置 重要的： 第一，使用HTML5 Doctype和相关指南； 第二， 重置好你的样式（reset.css）； 第三，一个简单的有语义的核心布局； 第四， 给重要的网页元素使用简单的技巧，比如导航菜单之类元素 使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现， 比如说CSS3特效或者JS脚本。 快速测试的方法： 首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读， 那么你的这个结构不会差到哪里去 Respinsive设计--meta标签最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。
个meta标签被称为可视区域meta标签，其使用方法如下。
<meta name=”viewport” content=”” /> content属性只要包括以下属性值，用来处理可视区域 为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> Responsive设计——不同设备的分辨率设置 1、1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2、800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3、640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4、iPad横版显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5、iPad竖屏显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6、iPhone和Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ } 自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中 resize就是一个重要的属性，它允许用户通过 拖动的方式来修改元素的尺寸来 改变元素的大小。 到目前为止，可以使用overflow属性的任何容器元素 resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。 resize: none | both | horizontal | vertical | inherit CSS3外轮廓属性 外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现 outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下： outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit 从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个 outline-offset属性，其取值说明如下 CSS生成内容 css3的伪类“：before”，“：after”和“：：before”、“：：after” perspective属性设置从多远的距离观看这个三D变化，值越小表示靠的越近 一般设置为1000px 2000px左右 transform-style属性 规定如何在 3D 空间中呈现被嵌套的元素 属性值： flat 子元素不保留3D位置 preserve-3d子元素将保留3D位置 当使用内边距padding时候会导致盒子被撑大，css3提供了一个属性防止这个情况发生 -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/