HTML5css3transationsanimationstransform调研结果(天猫伊语衣颜,双十二,元旦,双十一).docVIP

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