LEARNING CSS3 ANIMATIONS AND TRANSITIONS(1)

  想学CSS3动画来着,但是国内这方面的书确实少,讲的例子动画例子往往也不是很好,于是狠下心上网买了本国外的书,《LEARNING
CSS3 ANIMATIONS AND
TRANSITIONS》,在接下来的时间,我想通过写博客的方式来记录读书笔记并翻译下这本书,,本人英语不好,翻译不恰当的地方,还望各位看官见谅。

  今天是第一天就翻译下每个章节的介绍好了。

  第一章
使用CSS3动画

  本书的第一章浅谈了浏览器的支持,包括对Modernizer
Javascript库的介绍,一个可以让你检测用户的浏览器对HTML5特性的支持情况,同时为了使开发更容易,书中还将介绍一些工具和资源以及使用方法。

  第二章
为Transforms打下基础

  这本书绝大部分内容都使用了CSS3
transforms的强大功能。为了让你更了解它所能实现的效果,第二章详细的介绍了使用CSS3实现的各种2D转换。在这个章节,将带你仅使用CSS和transforms来画一辆自行车。

  第三章
Transitions的动画元素

  第三章讨论了如何结合transforms和transitions使动画在一段时间内运动起来。本章还讨论了如何使其它CSS属性通过transitions运动起来。在这章中你将为第二章的自行车例子添加车轮旋转动画和在用户的请求响应下进行运动。

  第四章
Keyframe和Animations

  Keyframe和Animations将带给你更精细的控制动画中的每个过渡阶段并与transitions做对比。在第四章中你将学习使用keyframe和animations为属性添加上简单动画。你也可以使用keyframe和animations实现弹簧弹跳和气球浮动的动画效果。

  第五章
通过视差滚动实现3D效果

  第五章将结合keyframe,animations和transforms视差滚动的概念使得你构建出的内容能在没有任何3D处理的情况下呈现出3D效果。在这章中将展现两个示例案例,它们都是使用视差滚动的概念在2D空间中创建立体感。

  第六章
通过3D转换添加深度

  第六章介绍了如何通过使用3D转换的特性改变元素的深度。本章将探讨可以应用到transforms属性的各个转换函数,同时还将探讨如何有效地使用perspective属性并查看转换后的结果。

  第七章
2D和3D的转换动画

  第七章演示了如何通过CSS3的transitions,keyframe和animations结合2D和3D的转换来实现有趣的效果。在本章中,通过使用transitions,一些HTML5的范围输入类型标签和少量的JavaScript使得你在第六章创建的3D立方体能围着三个坐标轴旋转。

  第八章
使用Transitions和Tranforms让文本动起来

  在第八章中你将结合keyframe,animations,transitions,transforms和少量的jQuery来创建一个文本驱动动画。使用CSS3去为标签添加上一些基础样式使得看起来打字机的一部分,然后你将通过Virginia
Woolf为打字机打出的文本添加上动画。

  第九章
通过Keyframe和Animations创建flash风格的动画

  在第九章中将结合前几章讨论的知识创建一只具有动画风格的小猫。动画在不同的场景中并在JavaScript定时器的触发下呈现出两种不同的风格。

  第十章
创建动画的信息图表

  第十章涵盖了信息图表的基础知识并教你如何为它添加上动画。结合书中之前所学知识,第十章概述了如何为不同成分比例的6种混合饮品建立一个简单可视化数据的每个步骤。

  第十一章
创建交互的信息图表

  通过一门语言,如JavaScript或者像jQuery之类的类库为信息图表增加交互性。在第十一章中,你将对第十章的信息图表做一些增加,结合使用CSS动画和jQuery使得饮料配方表更加丰富。

  终于翻译完每个章节的介绍了,还是那句话,翻译不好的地方,还望见谅。

时间: 2024-10-06 00:53:27

LEARNING CSS3 ANIMATIONS AND TRANSITIONS(1)的相关文章

css3动画属性(transitions:property duration timing transition-delay)

transitions:property duration timing-function; transitionst他有三个参数:1) property:属性设置,例如background,color等.2) duration:执行时间, 例如1s, 0.5s等.3) timing-function:动画种类, 例如linear 渐变 等.4) transition-delay:延迟时间. 例题(1): 1 p{ background:#000; 2 -webkit-transition:ba

CSS3 Transforms、Transitions和Animation属性总结

css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform.transition和animation,通过使用这三个属性可以达到很炫酷的效果.需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性. Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explorer 9 支持替代的 -ms-transform 属

纯CSS3跳动焦点广告轮播特效

1. [代码] 纯CSS3跳动焦点广告轮播特效 <!--  Author: Developed by Caleb Jacob Author Website: http://iamceege.com/ Author Contact: [email protected] Description: This is a pure CSS content slider developed to remove the shroud of mystery behind CSS3 animations and

IE10开始支持CSS3 Transitions, Transforms 和 Animations

这是一个好消息,微软公开说明IE10预览版已经支持CSS3属性 Transitions, Transforms 和 Animations,你可以直接写transitions,而不是加个恶心的前缀-ms-,这是一个大的进步,也将激发更多浏览器厂商尽快普及支持更多 CSS3.你一定认为这是微软给前端开发者的一个惊喜,的确,这是微软少有的积极,应该支持. 相信不少同学已经使用过了这几个CSS3属性,Transitions是设定一个时间,然后可以进行一些平滑的动画操作:Transforms是变形转换,这

如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡)

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子.我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程. 有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解.虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期. CSS animations和transitions再加上点J

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

CSS3 笔记四(Transforms)

CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). 2> rotate The rotate()

使用Modernizr探测HTML5/CSS3新特性

HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript 就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太 现实,老版本浏览器已经使用了很多年,我们依然需要考虑这些版本的兼容性问题.本文要解决的问题就是:在我们使用HTML5/CSS3技术的时候,如何更

css3动画功能介绍

一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duration: 表示在多长时间内完成属性值的平滑过渡. tra