HTML5 css3 transations animations trans调研结果....doc

HTML5 CSS3 transition animation transform的调研报告第1章 Transitions1、 Transitions知识点描述 Transition是一个相对比较重要的概念，无论是在flash还是客户端，都是一个比较普遍的概念，而W3C把他融入到了CSS3之中，目的我想是为了提高HTML5更富客户端的特性。那么，HTML5如何去使用transitions呢？他采用CSS的描述方式来表现,Transition提供以更方便的方式给web开发者实现过渡。Transition使用格式：属性 动画播放的时间 缓动函数格式相对比较简单，跟CSS3以前的格式也是差不多的，首先属性为要过渡的的属性值，譬如color，background-color等动画播放的时间是属性值在过渡时播放的过程中所需要的时间，缓动函数描述元素播的属性在过渡过程中，速度的产生规则，到底是由快到慢，由慢到快等。很简单的东西哦，所以我们开始练习吧！2、 Transitions实例描述 实例名称: 一个网页元素的背景色过渡 实例条件:l 熟悉Dreamwaverl 网页基础知识l Transition基础知识 实例过程:l 建立transition.htmll 写入html并预览效果l 加入css查看效果 3、 Transitions技术价值描述 Transitions可用于一些过渡动画，从而提高应用的用户体验。譬如：重要提示，使用过渡动画，将更友好的过渡出现相关的提示信息，使用户更易于接受。相比突然出现的提示，友好的过渡提示将能提高用户体验。第2章 Animation1、 Animation知识点描述Animation是专门为用HTML5制作动画而出现的，使用一些特别的工具，譬如sencha animator可以制作和flash媲美的动画效果。这项特性也是css3提供的，所以很明显，他的格式应该更css化，一个web开发人员能很快的入手去使用他。那么，先来看看他得格式：-webkit-keyframes 名称FromTo这里有一个关键帧的概念,学过flash的人应该知道，动画的每一帧都是静态的，把这些静态的连起来就是一个动画，这跟视频的概念也是一样的。在animation里面，我们通过from ，to关键字指定每一帧网页元素的属性值，这样播放后将是一个从from到to的动画。当然我们可以通过百分比来生成动画，在实例中会使用到。2、 Animation实例描述实例名称：一个div的变换动画实例条件：l 熟悉dreamwaverl 网页基础知识l Animation基础知识实现过程：建立animation.html写入html并预览效果写入css并预览效果3、 Animation技术价值描述 在制作动画时，可以使用animation 来制作而非flash，从而优化seo。并且客户端不需要插件就可以播放，当然是在支持HTML5的基础上。也可以为一些应用提供背景动画等。第3章 transform1、 transform知识点描述Transform故名思议转换的意思，可以为网页元素进行skew(倾斜),translate(坐标移动),scale(转换),rotate(旋转)。Transform格式如下:-webkit-transform:rotate/scale/translate (值)当然，css3提供更丰富的转换，譬如translate3d，他可以用户三维的移动坐标。Translate3d的格式为:-webkit-transform:translate3d(x,y,z),输入x轴y轴和z轴的移动值，可以使网页元素进行相应的移动。2、 transform实例描述实例名称：一个简单的图片轮播实例条件：l 熟悉dreamweaverl Transform相关知识l 网页基础知识l Jquery基础知识实现过程：建立lb.html写入html并预览效果写入css并预览效果3、 transform技术价值描述Transform的价值似乎很多，譬如在iphone里面模拟客户端切换滑动效果，在制作相册时，可以使用rotate和scale，在做图片放大器时也可使用，由于css3是使用原生的浏览器机制实现，相比使用js来实现一些效果来说，其性能要高于js，并且css3的transform支持GPU加速功能，即使在CPU不好的情况下也能流畅运行。第4章