html5 css3 transations animations transform调研结果...

《html5 css3 transations animations transform调研结果...》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、HTML5CSS3transitionanimationtransform的调研报告第一章Transitions一、Transitions知识点描述Transition是一个相对比较重要的概念，无论是在flash还是客户端，都是一个比较普遍的概念，而W3C把他融入到了CSS3之中，目的我想是为了提高HTML5更富客户端的特性。那么，HTML5如何去使用transitions呢？他采用CSS的描述方式来表现,Transition提供以更方便的方式给web开发者实现过渡。Transition使用格式：属性动画播放的时间缓动函数格式相对比较简单，跟CSS3以前的格式也是差不多的，首先属性为要过渡的

2、的属性值，譬如color，background-color等动画播放的时间是属性值在过渡时播放的过程中所需要的时间，缓动函数描述元素播的属性在过渡过程中，速度的产生规则，到底是由快到慢，由慢到快等。很简单的东西哦，所以我们开始练习吧！二、Transitions实例描述实例名称:一个网页元素的背景色过渡实例条件:l熟悉Dreamwaverl网页基础知识lTransition基础知识实例过程:l建立transition.htmll写入html并预览效果l加入css查看效果一、Transitions技术价值描述Transitions可用于一些过渡动画，从而提高应用的用户体验。譬如：重要提示，使用过

3、渡动画，将更友好的过渡出现相关的提示信息，使用户更易于接受。相比突然出现的提示，友好的过渡提示将能提高用户体验。第二章Animation一、Animation知识点描述Animation是专门为用HTML5制作动画而出现的，使用一些特别的工具，譬如senchaanimator可以制作和flash媲美的动画效果。这项特性也是css3提供的，所以很明显，他的格式应该更css化，一个web开发人员能很快的入手去使用他。那么，先来看看他得格式：@-webkit-keyframes名称{From{}To{}}这里有一个关键帧的概念,学过flash的人应该知道，动画的每一帧都是静态的，把这些静态的连起来

4、就是一个动画，这跟视频的概念也是一样的。在animation里面，我们通过from，to关键字指定每一帧网页元素的属性值，这样播放后将是一个从from到to的动画。当然我们可以通过百分比来生成动画，在实例中会使用到。一、Animation实例描述实例名称：一个div的变换动画实例条件：l熟悉dreamwaverl网页基础知识lAnimation基础知识实现过程：建立animation.html写入html并预览效果写入css并预览效果二、Animation技术价值描述在制作动画时，可以使用animation来制作而非flash，从而优化seo。并且客户端不需要插件就可以播放，当然是在支持HT

5、ML5的基础上。也可以为一些应用提供背景动画等。第二章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轴的移动值，可以使网页元

6、素进行相应的移动。二、transform实例描述实例名称：一个简单的图片轮播实例条件：l熟悉dreamweaverlTransform相关知识l网页基础知识lJquery基础知识实现过程：建立lb.html写入html并预览效果写入css并预览效果三、transform技术价值描述Transform的价值似乎很多，譬如在iphone里面模拟客户端切换滑动效果，在制作相册时，可以使用rotate和scale，在做图片放大器时也可使用，由于css3是使用原生的浏览器机制实现，相比使用js来实现一些效果来说，其性能要高于js，并且css3的transform支持GPU加速功能，即使在CPU不好的情

7、况下也能流畅运行。第一章总结本次调研对CSS3的动画特性进行调研，得出的结论为我们尝试可以通过transitions提高用户体验，通过animations来提高seo的友好星，通过tranform丰富应用的操作性。